css – 仅在Chrome / Safari中通过嵌入式Vimeo YouTube或Flash滚动时浮动视差DIV背景图像跳转

前端之家收集整理的这篇文章主要介绍了css – 仅在Chrome / Safari中通过嵌入式Vimeo YouTube或Flash滚动时浮动视差DIV背景图像跳转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在研究一个我下载的视差网页模板,它有背景图像的div,视差和漂浮在其他较低的z-index内容上.

每当我在下方区域使用他们的iFrame代码嵌入Vimeo或YouTube视频时,一旦浮动div“触摸”嵌入式播放器,视差将在y方向上跳跃的背景图像.我认为与Flash有关的问题最终被嵌入为具有正常页面嵌入的iFrame按预期工作 – 随意尝试.

这只发生在Chrome和Safari中. Firefox和IE按预期工作.我已经从我的网页模板中创建了一个精简的JSFiddle来说明问题.在上面的浏览器中尝试一下,你可以看到问题发生 – 只需滚动一下结果.

http://jsfiddle.net/wU2DU/2/

太多代码 – 只看JSFiddle – 这是查看问题的最简单方法

我真的想找到一个解决办法,因为我已经设计了我的整个网站,现在才注意到Chrome和Safari中的这个问题.

注意:问题不在于视差JS代码.我离开那里就是这样可以看出效果.没有该代码,背景图像仍会弹出.

解决方法

你的嵌入代码源里面有wmode = opaque.使用这个嵌入它应该工作:
<iframe src="http://player.vimeo.com/video/60982085" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" wmode="transparent"></iframe>

这是一个更新的小提琴:http://jsfiddle.net/fxv76/

猜你在找的CSS相关文章