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应用此规则*/