嵌入式视频创建位置错误:固定顶部标题

Question

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

position:fixed;
z-index:1000;

它通常停留在页面的顶部,没有任何抱怨.但是,每当我在页面中有一个youtube嵌入式视频(当时也必须播放)时,固定菜单会出现各种故障并跳转.这是一个常见的问题,嵌入式视频干扰位置:固定元素？问题出在Chrome浏览器,Safari,但奇怪的是,不是在Firefox中.

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

我知道这个描述不是很精细,所以这里是url:Chronicle Video Section.我正在上高中的学校报纸网站,我对这个问题感到难过 - 以前从未见过.在视频播放时尝试上下滚动.谢谢你的帮助.

iframe所在的div是:

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

如果它有帮助,我如何设置它是当前拉出wordpress帖子内容的入口内容,这只是youtube网址,Wordpress将网址转换为嵌入到该div中.

Answer 1

我发现添加了样式规则

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

固定的元素为我解决了疯狂.

Answer 2

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

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