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

【问题标题】：Background color switching to transparent while scrolling in WebKit browsers在 WebKit 浏览器中滚动时背景颜色切换为透明
【发布时间】：2014-02-10 06:21:41
【问题描述】：

我正在制作一个固定导航网站。我有一个使用绝对定位固定在屏幕顶部的导航栏。 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>，这似乎完全解决了这个问题。不过，这并不是一个理想的解决方案。背景视频是否存在任何已知问题？

【问题讨论】：

在不了解背景视频等细节的情况下很难为您提供帮助，从您发布的 Startup Design Framework 中我可以看到的最明显的一件事是：.visible { opacity: 1 !important; }
感谢 JackArbiter。我意识到这是一个有点模糊的问题。不幸的是，我很难提供更多细节，因为该网站非常复杂。据我所知，我们使用的结构与 Startup Framework 的演示站点非常相似。我想我的问题是 Chrome 的 WebKit 版本中是否有任何已知的错误会导致我看到的问题。感谢您抽出宝贵时间回复。您能否详细说明您找到的.visible { opacity: 1 !important }？我似乎无法在我们的本地 CSS 副本中找到该位，但它似乎很重要。
实际上再次查看它是具有可见类的较小元素的 css。背景视频不透明度：0.7；但我认为这是减少不透明度而不是增加它。如果您查看您在 Chrome 中提供的链接并使用开发人员工具控制台 (f12)，您可以选择视频部分及其子部分，看看他们的 css 和您网站的 css 之间是否有任何差异。另请注意，它们以多种格式提供视频，但只要 vid 是 mp4、webm 或 ogg 就无关紧要，因为 Chrome 支持所有这 3 种格式。
午餐时环顾四周，一个有类似问题的人（今天）发现解决方法是使用完整的 url 而不是相对的。 stackoverflow.com/questions/9275802/…（底部答案）请注意，该操作可能不直接相关，因为所述错误已“修复”，但 chris edwards 的答案可能是您正在寻找的。span>
我们肯定会比较 CSS 和 HTML。在这一点上，这不是一个主要问题，但在我们发布这个项目之前需要修复它。我认为 HTML 之间存在一些非常明显的差异。我们提供了所有推荐的格式，但是绝对与相对链接的事情很有趣。下次有机会我一定要试试。如果是这样奇怪的事情，我不会感到惊讶。再次感谢您的帮助，我一定会及时更新这个问题！

标签： html css webkit background-color webpage-rendering

【解决方案1】：

您是否尝试过使用 Firebug 来调试问题？我建议你使用 Firebug 来调试这个问题。

【讨论】：

我还没有真正看过它。这个问题实际上并没有在 Firefox 中发生，因此在 Firebug 中调试可能有点困难。我在 Chrome 中使用 Webkit Inspector。无论如何，感谢您的建议。

【解决方案2】：

您应该尝试几种不同的方法。首先尝试使用 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;

【讨论】：

谢谢瑞恩！这些建议似乎确实有帮助，我真的很喜欢你解释一切的方式。我很感激！

【解决方案3】：

我最近在使用 webkit 浏览器时遇到了同样的问题。您所要做的就是将它添加到您的 .navbar 类中的 css 中，看看它是否有效：

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

【讨论】：

【解决方案4】：

.navbar {
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #1f1f1f;
   z-index: 1030;
}

【讨论】：

如果您向 OP 解释为什么这是答案，那就太好了。
除了格式不同和缺少margin-bottom: 0 之外，这看起来与上面的kamuken 答案基本相同，但没有解决问题。我错过了什么吗？

【解决方案5】：

试试这个：

.navbar {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
background-color: #1f1f1f
}

【讨论】：

如果您向 OP 解释为什么这是答案，那就太好了。
对不起，我在原来的帖子中犯了一个错误。明显的缺陷是我使用的是position: absolute。我实际上使用的是position: fixed，如此处所述。恐怕，进行其他更改并不能解决问题。
对此进行了更多实验，请参阅上面的“更多信息”部分。看来背景视频是罪魁祸首。