html - 在 WebKit 浏览器中滚动时背景颜色切换为透明

Question

我正在制作一个固定的导航网站。我使用绝对定位将导航栏固定在屏幕顶部。 CSS 看起来像这样:

.navbar {
    background-color: #1f1f1f
    top: 0px;
    position: fixed;
    width: 100%;
}

这是我的 HTML:

<header class="navbar">...</header>

这应该非常简单，但由于某种原因，我看到导航的背景在 #1f1f1f 之间闪烁。我会简单地描述为 transparent 。

我可以将滚动位置设置到背景颜色透明的位置。此时，当我在 WebKit 检查器中检查该元素时，就会看到预期的样式。一个background-color的#1f1f1f以及基本上我上面提到的所有其他内容。

我可以切换 background-color在检查器中打开和关闭属性，这通常会使背景恢复正常。

最后，这似乎只是基于 WebKit 的浏览器的问题。我可以在 Chrome 和 Opera 中重现该问题，但不能在 Firefox 或 Internet Explorer 中重现。我似乎也无法在 Safari 中重现这一点，至少在 7.0 (9537.71) 版本中不行。我也在使用Startup Design Framework该网站在内容下方的背景中确实有一个视频 <div> ，类似于该演示页面。这会导致某种渲染故障吗？

更多信息: 我删除了背景视频<div>从页面上看，这似乎完全解决了问题。但这并不是一个真正理想的解决方案。背景视频是否存在任何已知问题？

Answer 1

您应该尝试几种不同的方法。首先尝试使用 z-index 堆叠元素:

z-index: 1000000; /* max: 2147483647 */

接下来，您可以尝试在菜单上强制进行硬件加速。浏览器将为您的菜单创建新的渲染层，这可能会防止闪烁。

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

最后，如果您的元素比屏幕大(即使在任何方向上大一个像素)，它可能会导致在某些设备上滚动时出现闪烁。尝试添加以下内容:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;