技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> Firefox滚动残影

Firefox滚动残影

浏览:2067次  出处信息

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

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

建议继续学习:

  1. Firefox的about 页面    (阅读:12976)
  2. 十款Firefox插件帮助Web开发者提高效率    (阅读:3327)
  3. 清除Firefox下Flash(swf文件)缓存    (阅读:2754)
  4. 记开发firefox extension    (阅读:2492)
  5. Firefox 常用插件推荐    (阅读:2310)
  6. Firefox 开发者工具之调试控制台 Console 的使用    (阅读:1450)
  7. 说说最近Google:safebrowsing引发页面加载阻塞的问题    (阅读:1132)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1