Firefox滚动残影
浏览:2075次 出处信息
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应用此规则*/ |
建议继续学习:
- Firefox的about 页面 (阅读:13002)
- 十款Firefox插件帮助Web开发者提高效率 (阅读:3357)
- 清除Firefox下Flash(swf文件)缓存 (阅读:2766)
- 记开发firefox extension (阅读:2503)
- Firefox 常用插件推荐 (阅读:2319)
- Firefox 开发者工具之调试控制台 Console 的使用 (阅读:1480)
- 说说最近Google:safebrowsing引发页面加载阻塞的问题 (阅读:1175)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:拥抱并使用CSS3
后一篇:愚人节页面翻转效果的实现 >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: Firefox 残影
- 发布时间:2011-03-30 13:46:52
建议继续学习
近3天十大热文
- [46] 界面设计速成
- [40] 视觉调整-设计师 vs. 逻辑
- [40] Oracle MTS模式下 进程地址与会话信
- [38] IOS安全–浅谈关于IOS加固的几种方法
- [37] android 开发入门
- [36] 如何拿下简短的域名
- [36] 程序员技术练级攻略
- [35] 图书馆的世界纪录
- [35] 【社会化设计】自我(self)部分――欢迎区
- [32] 读书笔记-壹百度:百度十年千倍的29条法则