Firefox滚动残影(转)

最新推荐文章于 2022-08-19 09:13:48 发布

weixin_30338743

最新推荐文章于 2022-08-19 09:13:48 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LoveOrHate/p/4410087.html

本文探讨了Firefox滚动残影的解决方法，该问题在CSS使用position:fixed属性时出现，表现为内容被切割出现分离现象。通过将fixed区域扩展至全屏并添加穿透属性和边框，可以有效解决这一问题。

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层的完整代码是：

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

转载于:https://www.cnblogs.com/LoveOrHate/p/4410087.html