ansaurus

Question

Animated gifs causing input flicker in IE

Answer 1

A:

Perhaps it's your CPU that can't handle the load? This could especially be caused on an older machine on a website running intensive javascript.

Malfist 2009-05-21 18:02:05

Nope, not it. Machine is just fine. I work at a gaming company, so the one thing they don't cheap on is CPU, RAM and Video cards :)

John 2009-05-21 18:13:17

Please provide some html so that we at least have the idea of how you are placing it.

Dmitri Farkov 2009-05-21 18:17:37

Answer 2

+1 A:

Suffice it to say that we have an animated gif absolutely positioned. it is ~ 600 x 400. it sits beneath another abs. positioned div which provides a transparency layer. Finally the form itself is abs. positioned over that.

<style type="text/css">
#img {
    position: absolute;
}
#dv {
    background-color: transparent;
    border: 1px solid Black;
    height: 450px;
    position: absolute;
    width: 600px;
}
#frm {
    left: 170px;
    position: absolute;
    top: 100px;
}
</style>
<img src="http://vulcan.wr.usgs.gov/Imgs/Video/MSH/MSH06/MSH06_MOVIE_before_after_from_brutus_10-21_and_10-22-06_animated.gif" id="img">
<div id="dv">
</div>
<form id="frm">
<input type="text">
</form>

I tried to replicate what you described as closely as possible. I loaded the above into IE 6, 7 and 8 and was unable to see any flickering cursor problems.

Given that I can come up with an implementation that does not exhibit the issue, there does not seem to be any general animated-gif-causes-input-cursor-flickering bug in IE 7 and something in your specific markup and CSS is exposing the problem in that browser.

Take away the gif, and the problem goes away.

knowing for a fact that the animated gif is the reason for the screen draw is the result of a successful debug.

Certainly adding the animated gif is the final piece of the puzzle leading to what you are seeing. But as I've demonstrated, you can have an absolutely positioned form over an absolutely positioned animated gif with a transparent div between them and the cursor does not flicker.

I think you are going to have to strip away what you are doing one layer at a time until you can determine specifically what it is in your markup or CSS that exposes the problem.

There is one other possibility, the flickering you are seeing may be an artifact of your video card and/or video driver. You might want to try viewing the page under IE 7 on a machine with completely different hardware to rule out this possibility.

Grant Wagner 2009-05-21 19:56:14

I appreciate the attempt, but you are incorrect. The animated gif you used in your example had a framerate that is to low. To be clear: I did not get a flicker with your example. I modified your code, used my image, and the flicker is there. I've edited my original post to reflect this. I appreciate the attempt, but my problem persists, and the original analysis is still the best one.

John 2009-06-10 14:05:20

ansaurus

tags:

views:

answers:

Animated gifs causing input flicker in IE

related questions