在IE中导致输入闪烁的GIF动画

时间:2009-05-21 17:49:39

标签: internet-explorer gif animated

当页面上有动画gif时,输入中的光标与IE7一起闪烁。

带走gif,问题就消失了。

编辑(再次): 我真正需要的是一个知道奇怪的错误答案的人。

我是一位有10年经验的网络应用开发者。相信我,我知道如何调试 - 例如,知道动画gif是屏幕绘制的原因是成功调试的结果。修复这是另一回事。

再次编辑(再次),使用我的gif和下面三个答案中的代码。

<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>

3 个答案:

答案 0 :(得分:0)

也许是你的CPU无法处理负载?这可能尤其是在运行密集型javascript的网站上的旧机器上造成的。

答案 1 :(得分:0)

  

我只想说我们有一个   动画gif绝对定位。它   是~600 x 400.它位于下方   另一个腹肌。定位div   提供透明层。最后   形式本身就是绝对的。定位的   那个。

<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>

我试图尽可能地复制你所描述的内容。我将上面的内容加载到IE 6,7和8中,无法看到任何闪烁的光标问题。

鉴于我可以提出一个没有出现问题的实现,IE 7中似乎没有任何一般的 animated-gif-cause-input-cursor-flickering 错误您的特定标记和CSS中的某些内容在该浏览器中暴露了该问题。

  

带走gif和问题   走了。

     

知道动画的事实   gif是画面画的原因   是成功调试的结果。

当然,添加动画gif是导致你所看到的拼图的最后一块。但正如我已经证明的那样,你可以在一个绝对定位的动画gif上有一个绝对定位的形状,它们之间有一个透明的div,光标不会闪烁。

我认为你将不得不一次性删除你正在做一层的事情,直到你可以明确地确定你的标记或CSS中暴露问题的内容。

还有另一种可能性,您看到的闪烁可能是您的视频卡和/或视频驱动程序的神器。您可能想尝试在具有完全不同硬件的计算机上查看IE 7下的页面以排除这种可能性。

答案 2 :(得分:0)

我有同样的问题。删除动画gif和闪烁停止。

看着CSS,我注意到图像正在调整大小以供显示。

我使用在线编辑器创建了我需要的大小的图像副本。

将动画gif切换到不需要调整大小的版本可以解决问题。