我正在研究一个我下载的视差网页模板,它有背景图像的div,视差和漂浮在其他较低的z-index内容上.
每当我在下方区域使用他们的iFrame代码嵌入Vimeo或YouTube视频时,一旦浮动div“触摸”嵌入式播放器,视差将在y方向上跳跃的背景图像.我认为与Flash有关的问题最终被嵌入为具有正常页面嵌入的iFrame按预期工作 – 随意尝试.
这只发生在Chrome和Safari中. Firefox和IE按预期工作.我已经从我的网页模板中创建了一个精简的JSFiddle来说明问题.在上面的浏览器中尝试一下,你可以看到问题发生 – 只需滚动一下结果.
太多代码 – 只看JSFiddle – 这是查看问题的最简单方法
我真的想找到一个解决办法,因为我已经设计了我的整个网站,现在才注意到Chrome和Safari中的这个问题.
解决方法
你的嵌入代码源里面有wmode = opaque.使用这个嵌入它应该工作:
<iframe src="http://player.vimeo.com/video/60982085" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" wmode="transparent"></iframe>
这是一个更新的小提琴:http://jsfiddle.net/fxv76/