Animated gifs causing flickering in IE
Input cursor flickers with IE7 when there is an animated gif on the page.
Remove the GIF and the problem goes away.
Edit (again): I really need someone who knows the answer to the quirky, i.e. error.
I am an experienced web application developer for ten years. Trust me, I know how to debug - for example, knowing that an animated gif is causing the screen to draw is the result of successful debugging. Fixing is another matter.
Edit (again, again) using my gif and the code from the answer below.
<html>
<head>
<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>
</head>
<body>
<img src="http://www.johnherr.net/skeleton.gif" id="img">
<div id="dv">
</div>
<form id="frm">
<input type="text">
</form>
</body>
</html>
Suffice it to say that we have an animated gif absolutely positioned. This is ~ 600 x 400. It is below the other abs. a positioned div that provides a level of transparency. in conclusion, the form itself is abs. positioned over it.
<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 reproduce what you described as closely as possible. I downloaded the above in IE 6, 7 and 8 and couldn't see any flickering cursor issues.
Considering that I can come up with an implementation that doesn't exhibit this issue, there isn't any generic animated-gif-cause-input-cursor-flickering error in IE 7, and something in your specific markup and CSS exposes the issue in that browser ...
Remove the GIF and the problem goes away.
knowing that animated gifs are the reason for drawing the screen is the result of successful debugging.
Of course, adding an animated gif is the final piece of the puzzle leading up to what you see. But as I've shown, you can have an absolutely positive shape above an absolutely positioned animated gif with a transparent div in between and the cursor doesn't flicker.
I think you'll have to give up what you're doing one layer at a time until you can figure out what exactly is in your markup or CSS that exposes the problem.
There is another possibility, the flickering you see could be an artifact of your graphics card and / or video driver. You can try viewing the page in IE 7 on a completely different machine to rule out this possibility.
a source to share
I had the same problem. Remove the animated gif and the flickering will stop.
After looking at the CSS, I noticed that the image was changed to display.
I created a copy of the image using an online editor, at the size I need.
Switching the animated gif to a version that does not require resizing solved the issue.
a source to share