css - 仅在 Chrome/Safari 中滚动到嵌入式 Vimeo YouTube 或 Flash 时， float 视差 DIV 背景图像会跳转

Question

我正在开发一个我下载的视差 Web 模板，该模板具有带背景图像的 div，这些 div 具有视差并漂浮在其他较低 z-index 内容上。

每当我在下方区域使用 iFrame 代码嵌入 Vimeo 或 YouTube 视频时，只要 float div“接触”嵌入的播放器，视差背景图像就会在 y 方向上跳跃。我认为这个问题与 Flash 最终作为 iFrame 嵌入的问题有关，嵌入的普通页面按预期工作 - 请随意尝试。

这只发生在 Chrome 和 Safari 中。 Firefox 和 IE 按预期工作。我从我的网络模板中创建了一个精简的 JSFiddle 来说明问题。在上述浏览器中尝试一下，您可以看到问题的发生 - 只需滚动一下结果即可。

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

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

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

注意:问题不在视差 JS 代码中。我把它留在了可以看到的效果感中。如果没有该代码，背景图像仍然会弹出。

Answer 1

您的嵌入代码源中包含 wmode=opaque。使用这个嵌入，它应该可以工作:

<iframe src="http://player.vimeo.com/video/60982085" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" wmode="transparent"></iframe>

这是一个更新的 fiddle :http://jsfiddle.net/fxv76/