flash wmode="window" 时的遮挡问题.
在本文开始前 , 我先引入,摸同学的文档. 来说明一些问题.然后我在此基础上,会做一些扩展说明.
基于以上的认识,我们开始接下来的话题...
我们所要解决的是这样一种需求: 当我们 现在有一个很大滴 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 beta : 无效.
FireFox 3.5 及之前版本 . 元素 position : fixed 以外的值. 无效. (即必须当节点的position:fixed时,才ok )
幸运的是对于FireFox3.6 及4.0 beta 我们已经无需借助iframe来修复.只需要给元素简单设置一个background 非 transparent 的值即可.
要注意的是,如果background 是一个image 那么,如果image 有透明部分,则任然会有问题.
FireFox 3.6 及 4.0 beta : 当使用background 修正时,如果这个修正仅针对元素内部的表格元素的 空td 则无效.(解决办法给td : display:block,或想办法 让td具备一个有效的宽高).
对于 FireFox 3.5 及之前版本,首先我建议放弃修复, 如果非要修复.则只好使用position:fixed,再配合中间的iframe,然后通过一系列js 修补其行为.让他看起来是正常的.
一些小问题:
IE6-IE9beta : 在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 2px #000' : 'solid 1px #000' ; document.body.offsetWidth; //强制浏览器flush当前的ui update 队列.
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.可以绕过.浏览器对ui update 队列的优化.
其实 代码仍然不够严谨. 因为 原始的boreder 很可能 影响reflow的 borderWidth 受css样式影响, 即原来就是1px,那么上面的代码,很可能只会触发repaint,而不是我们期望的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的出现.
所有chrome8+的webkit内核浏览器共有的渲染bug.当用来遮罩的iframe的z-index为-1(即使其父节点也是绝对定位,且具备非常高的z-index).的情况,如果页面中某一个flash(wmode==window),采用绝对定位(除非其父节点也为绝对定位,即flash没有脱离布局流).则会造成iframe遮罩层是去作用,被浏览器处理为x层级在flash之下了..更加怪异的是,其中任何一个flash 采用绝对定位，其他flash也会受影响.
解决办法:
1.避免直接给flash(object、embed)设置绝对定位或fixed 等使其脱离布局流的做法.除非使其父节点使用绝对或fixed定位.
2.给flash元素设置 z-index: -1.
3.避免iframe遮罩层,使用z-index:-1方式.而采用动态计算表层div位置.跟随的方式.对flash进行遮罩.
好了 到了结束的时候了..
列出毛病最少的几个浏览器 也就是基本不需要使用 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的 浏览器 需要的逻辑.
}
好吧,代码很悲剧.我不得不承认这一点.
