firefox 滚动残影的bug

不知道大家有没有遇到过,当我们设置了一个固定的浮动层后。在firefox下滚动会出现一些残影的情况? 总觉得页面的表现很不流畅。而且这个情况,只出现在 firefox for win的版本(mac版的firefox不会出现)

 

先看一下下面的视频(由于截屏软件录不了这个效果,只好拿手机录了)。

在视频里,我们很清楚得看到,白色的浮动层被快速的滚动切割成两半。

 

重现的代码片段:

<!--带 overflow-x:hidden 或则 overflow-y:hidden 的长条-->
    <div style="width:300px;height:3000px;border:1px solid #333;background:#ccc url(http://www.iecool.cn/uppic/2007-3-27/206499575_2.jpg);overflow-x:hidden"></div>

    <!--带 button 的 position:fix Div-->
    <div style="position:fixed;width:200px;height:100px; left:200px;top:200px;border:1px solid #000;background:#fff;padding:6px">
        <!--一个 button-->
        <button id="button1">我是button</button>

        <!--一些开关--><br/><br/>
        <a href="#" onclick="document.getElementById('button1').style.display = '';return false">显示按钮</a>
        <a href="#" onclick="document.getElementById('button1').style.display = 'none';return false">隐藏按钮
</a>
</div>

 

两个 div ,其中不浮动的div,只要设置了overflow-x 或 overflow-y 的hidden属性,然后另外一个div设置成浮动,并且其html带一个 button 标签。就会让firefox在渲染上出现问题了。

 

看在线的演示,请用firefox 3.0以上任何版本,快速滚动滚动条。

 



[本日志由 puterjam 于 2009-07-04 01:49 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: Firefox
相关日志:
评论: 38 | 引用: 0 | 查看次数: -
回复回复jonwang[2010-08-14 09:53 PM | del]
以前我也遇到过,试过好多办法,最好终于找到解决的办法,说来也简单
给div上一个overflow:auto就可以了
至于为什么这样可以解决,我也不清楚
回复回复fener[2010-06-04 02:21 PM | del]
没有出现上面的问题啊。。xp下的
回复回复yoom[2010-03-01 04:39 PM | del]
发现过,记得淘宝不是经常在右下角有个旺旺小贴士么,往下滚动滚动条,旺旺的透明区域就会出现残影。
回复回复yubo[2010-02-27 08:49 PM | del]
未存在这个问题
回复回复zhouqi[2009-12-15 08:45 PM | del]
不存在button也会发生~
回复回复z.En[2009-08-26 09:14 AM | del]
早都发现这个问题了
回复回复ysunt[2009-08-08 02:01 PM | del]
删除文章的时候出现

Server.MapPath() ?펳 'ASP 0174 : 80004005'

ΞЧ Path ז??nt>

/control/c_article.asp??А 59

Ԛ MapPath ?ĠPath ?Ί?ց˒?????Ġ'/' ?򠧜'??

我服务器的问题?还是......
回复回复Kimo[2009-08-07 11:41 PM | del]
可能只有3.5系列有问题而3.0系列的没事
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.