Firefox滚动残影(转)

Firefox滚动残影

 

    Firefox滚动残影这文章放在草稿箱有一阵子了，之前的3系列都有这BUG，当正想发表这文章的时候，和我沟通刚刚升级的FF4已修复此BUG，所以搁置一阵在考虑到这文章还有没有价值，既然写了还是发吧，就当撑撑场面。相信FF3~4版本之间也需要一些时间做过渡，希望对各位还有用。

    这BUG算是老问题，困扰我很长一段时间，最近做项目又遇上但总算找到办法把它解决了。这BUG的表现是：当在CSS编写 position:fixed;属性值后，拖动滚动条会出现内容被切割出现分离的情况，类似于残影的BUG。据说是Firefox 3.0版本就开始出现这问题，至现时的Firefox 3.6版本问题依然存在。具体如： Demo

    FF残影很久前就有提及过，并为这BUG的特征录制了视频。在讨论中有人说是显卡或系统问题， 但测试过一些高端显卡及不同系统问题依然存在(苹果系统是没问题的)，对此感到迷惑。尝试过有人给出的解决放法overflow:auto但无效。

    具体原因还未知，但据观察部分内容设定fixed后，浏览器只会对没有被fixed层遮罩的区域切割，我们来个将计就计，把fixed区域 扩至最大全屏(在内容层之上添加一个标签让其fixed层覆盖全屏)，但添加fixed层后会挡住内容导致无法点击选中等操作，所以要添加具有穿透力的 pointer-events: none; 它将不会捕获任何click事件但。另外添加border:1px solid transparent;也时必须的(为什么要border？测试出来的结果完全无解)。 最后解决方法如：Demo

    最后fixed层的完整代码是：

1
2
3
4
5
6
7
8
9
10
11
12
13

.wrap_shadow{display:none;}/*针对所有浏览器把它隐藏*/
@-moz-document url-prefix(){
.wrap_shadow{
position:fixed;
top:0;
z-index:2;
pointer-events:none;
width:100%;
height:100%;
border:1px solid transparent;
display:block;
}
}/*针对FF应用此规则*/
posted @ 2015-04-09 16:47  一点点白  阅读(549)  评论(0)  编辑  收藏  举报