zoukankan      html  css  js  c++  java
  • Firefox滚动残影

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

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

    FF残影很久前puterjam就有提及过,并为这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; 100%; height:100%; border:1px solid transparent; display:block; } }/*针对FF应用此规则*/ 
  • 相关阅读:
    HDU 1058 Humble Numbers
    HDU 1421 搬寝室
    HDU 1176 免费馅饼
    七种排序算法的实现和总结
    算法纲要
    UVa401 回文词
    UVa 10361 Automatic Poetry
    UVa 537 Artificial Intelligence?
    UVa 409 Excuses, Excuses!
    UVa 10878 Decode the tape
  • 原文地址:https://www.cnblogs.com/shihao/p/2327713.html
Copyright © 2011-2022 走看看