Mikel
[转载]flash wmode=”window” 时的遮挡问题. – Franky – 博客园.
在本文开始前 , 我先引入,摸同学的文档. 来说明一些问题.然后我在此基础上,会做一些扩展说明.
基于以上的认识,我们开始接下来的话题…
我们所要解决的是这样一种需求: 当我们 现在有一个很大滴 flash 在页面上,且wmode 必须为window的前提下…如何使我们的一些元素不被 flash遮挡的呢?
遗憾的是,我所能给出的答案是 . 并不完美.我仍然无法搞定 opera 和 safari 两款浏览器. 那么此文 希望可以起到抛砖引玉的作用吧.
其实答案很简单. 在展示元素下面、flash上面放一个iframe.
一个最佳实现方式是:
<iframe src=”about:blank” width=”300″ height=”200″ frameBorder=”0″ style=”z-index:-1;position:absolute;top:0;left:0;border:0″></iframe>
把这样的一个iframe 按照你喜欢的方式 放入元素中.(应该是该元素直系子节点.)其中 width height 为元素宽高. 重要属性z-index:-1.是我们的救星.
当然,最后别忘了加个透明度 0 ..否则ie下很郁闷.
好吧中心思想就是这个.但是,这个办法并不是所有浏览器都有效. 并且,各个浏览器总会有这样或那样的bug存在:
严重问题:
Safari : 无效.
Opera : 无效.
FireFox 3.6 及 4.0 demo : 无效.
FireFox 3.5 及之前版本 . 元素 position : fixed 以外的值. 无效. (即必须当节点的position:fixed时,才ok )
幸运的是对于FireFox3.6 及4.0 demo 我们已经无需借助iframe来修复.只需要给元素简单设置一个background 非 transparent 的值即可.
要注意的是,如果background 是一个image 那么,如果image 有透明部分,则任然会有问题.
FireFox 3.6 及 4.0 demo : 当使用background 修正时,如果这个修正仅针对元素内部的表格元素的 空td 则无效.(解决办法给td : display:block,或想办法 让td具备一个有效的宽高).
对于 FireFox 3.5 及之前版本,首先我建议放弃修复, 如果非要修复.则只好使用position:fixed,再配合中间的iframe,然后通过一系列js 修补其行为.让他看起来是正常的.
一些小问题:
IE6-IE9demo : 在flash与当前窗口上其他元素 切换焦点时, 元素会被flash遮挡.
IE7: 当 元素为 position:fixed时,滚动条滚动后.元素会被flash遮挡.
搜狗高速浏览器 2.1及之前的版本,webkit内核下: 当元素位置发生改变时. 会保留一个残影.(残影数一般只有一个,由于中间的iframe造成)
以上小问题.都可以通过触发Render Tree 全局 Reflow 修复. 除了QQ
考虑下面的代码:
var border = document.body.style.border ;
document.body.style.border = border == ‘solid 1px #000’ ? ‘solid 1px #001’ : ‘solid 1px #000’ ;
document.body.offsetWidth; //强制浏览器flush当前的reflow队列.
document.body.style.border = border; //恢复border 原始值.
document.body.style.border = border; //恢复border 原始值.
border 属性和值是随意的.只要你能引起全局的reflow 并且视觉上无影响.如何做都是可以的.. 比如ie下 可以用.body.style.zoom.
你甚至可以不实用offsetWidth,在1、0之间切换 zoom ,就可以直接造成reflow… 读取body.offsetWidth.可以绕过.浏览器对reflow队列的优化.
棘手的小问题:
QQ5 浏览器 webkit 内核下: 当元素位置发生改变时,产生残影造成花屏的现象.
此问题,全局reflow可以改善花屏效果.但连续移动中.视觉上更多的感觉是.元素被flash遮盖住了.直到元素停止移动.
搜狗高速浏览器 2.1及之前的版本,webkit内核下: 当元素所处 平面位置在flash外边时,而此时元素内部某子元素通过定位调整. 与flash 在平面上有交集时,交集部分会被flash遮盖.
此问题.需要修改元素 DOM结构来解决.暂时也无甚好的方法.
所有使用. chromium开源项目的 webkit内核的浏览器如:Chrome全系,maxthon3、搜狗高速浏览器、QQ5浏览器、360高速浏览器.下
使用iframe修复遮盖后. 动态修改 元素.style.clip 时. 由于元素可视区域变化.而造成的 iframe 残留阴影问题(此阴影与flash下面的背景同色).
应避免使用clip属性. 以避免此bug的出现.
好了 到了结束的时候了..
列出毛病最少的几个浏览器 也就是基本不需要使用 reflow的浏览器
chrome maxthon3 搜狗高速浏览器2.2 FF3.6 + 以及使用比较新的chromium 开源项目所提供内核的浏览器 比如 360 高速浏览器 以及 等等 所谓高速浏览器的 国产山寨货们.
其中比较难搞的浏览器是搜狗2.2 和之前版本的 webkit判断.. 当然userAgent是有区别. 我仍然给出一个基于特性的检测方法:
var win = window,
isWebkit = !!+’\v1′ && !win.XDomainRequest && !navigator.taintEnabled;
if(isWebkit && !!win.external && ‘StartPageCall’ in external && !(‘localdb’ in external)){
//这里是你需要修复的搜狗高速浏览器webkit内核下 版本小于2.2的 浏览器 需要的逻辑.
}
好吧,代码很悲剧.我不得不承认这一点.
