6

我在页面顶部有一个菜单元素

position:fixed;
z-index:1000;

它通常停留在页面顶部，没有任何抱怨。但是，每当我在页面中有嵌入的 youtube 视频（当时也必须正在播放）时，固定菜单似乎都会出现各种故障和跳动。这是一个常见问题，嵌入式视频会干扰位置：固定元素吗？问题出在 Chrome、Safari 中，但奇怪的是，不在 Firefox 中。

这个控制台错误与它有什么关系吗？不安全的 JavaScript 尝试从具有 URL ww.youtube... 的框架访问具有 URL ww.youtube... 的框架 域、协议和端口必须匹配。

我知道这个描述不是很详细，所以这里是网址：Chronicle Video Section。我正在制作我高中的校报网站，但我被这一问题难住了——以前从未见过。尝试在视频播放时上下滚动。谢谢你的帮助。

iframe 所在的 div 是：

<div class="entry-content">
    <p>
        <iframe... />
    </p>
</div>

如果有帮助，我的设置方式是它当前提取 wordpress 帖子内容的条目内容，这只是 youtube url，Wordpress 将 url 转换为嵌入到该 div 中。

4

3 回答 3

13

我发现添加样式规则

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);

到固定元素为我整理了疯狂。

于 2013-06-04T23:27:00.387 回答
3

我遇到了完全相同的问题，我找到了一个非常简单的解决方案。添加以下参数：

?wmode=transparent

到 youtube 视频网址。例如：

<iframe width="560" height="315" src="http://www.youtube.com/embed/brg1H4BuII8?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

更多细节在这里。

于 2013-01-07T01:48:13.513 回答
2

这不是 YouTube 错误。这是一个与重绘固定位置项目相关的 webkit 错误。我建议使用 webkit 提交错误。 http://www.webkit.org/quality/reporting.html

如果您现在想要解决方法，我建议您监听窗口滚动事件并更改菜单的样式（宽度、高度或位置）以强制重绘。

于 2012-10-03T22:11:05.893 回答