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

Posted 2023-03-13

【中文标题】仅在 Chrome/Safari 中滚动嵌入 Vimeo YouTube 或 Flash 时，浮动视差 DIV 背景图像会跳转

【英文标题】：Floating Parallax DIV Background Image Jumps When Scrolled Over Embedded Vimeo YouTube or Flash in Chrome/Safari Only

【发布时间】：2013-06-24 05:51:34

【问题描述】：

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

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

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

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

Too much code - just see the JSFiddle - that's the easiest way to see the issue

我真的很想找到解决方法，因为我已经设计了整个网站，并且刚刚在 Chrome 和 Safari 中发现了这个问题。

注意：问题不在于视差 JS 代码。我把它留了下来，这样就可以看到效果了。没有该代码，背景图像仍然会弹出。

【问题讨论】：

这是一个有趣的问题。它显然会影响 background-attachment 属性。

我尝试使用 html5 视频标签，这样可以避免这样的效果..

尝试将 Z-index 添加到 iFrame。

【参考方案1】：

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

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

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

【讨论】：

刚刚重新审视这个问题，当我测试我原来的 JSFiddle 时，看起来问题在所有浏览器中都已修复。将给出答案检查，因为您的修复显然在 Chrome 和 Safari 中仍被破坏时有效。