2

我正在制作一个固定的导航网站。我有一个使用绝对定位固定在屏幕顶部的导航栏。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 中重现。7.0 (9537.71)我似乎也无法在 Safari 中重现此内容，至少不是在版本中<div>。这会导致某种渲染故障吗？

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

4

5 回答 5

3

你应该尝试一些不同的东西。首先尝试使用 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;
于 2014-01-28T11:05:57.680 回答
1

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

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

于 2014-01-27T16:39:47.110 回答
0

尝试这个：

.navbar {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
background-color: #1f1f1f
}
于 2014-01-20T21:55:47.777 回答
0 
.navbar {
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #1f1f1f;
   z-index: 1030;
}
于 2014-01-23T14:02:24.107 回答
-1

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

于 2014-01-28T09:59:35.120 回答