8

我正在研究我下载的视差 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 代码。我把它留了下来，这样就可以看到效果了。没有该代码，背景图像仍然会弹出。

4

1 回答 1

1

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

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

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

于 2013-08-12T20:42:28.197 回答