滚动时导航栏模糊

Question

滚动时，我已成功将导航栏固定在网页顶部，但通过某些div（主要是滑块）时，导航栏变得有些模糊。 有人可以帮我吗？

http://www.clinicajardinsbenfica.pt/new.html

提前致谢！

编辑：看来问题只在于铬。 不知道为什么。

edit2：这是带有问题http://www.screenr.com/mVEH的视频截图

Answer 1

如果您要讨论的是虚线框下方的破碎背景，请在给定CSS下方添加以修复该问题

#nav li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: none !important;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: auto auto;
    float: left;
    font-family: GothamHTF-Medium;
    font-size: 17px;
    padding: 22px 0.85em 16px;
}

是您要找的东西吗？

Answer 2

Chrome在呈现固定元素方面存在一些问题。

您应该开始将以下内容添加到您的固定元素中：

-webkit-backface-visibility: hidden;

-webkit-transform: translateZ(0) scale(1.0, 1.0);

translateZ(0)可用于修复许多Chrome Bug。

如果这样不起作用，请确保固定元素的容器内没有opacity为0元素。 如果是这样，请确保它们也display:none;

如果仍然没有结果，请确保您具有以下条件：

html,body { 
    height:100%;
    overflow:auto
}

铬方面仍然存在未解决的bug问题。

Answer 3

将此CSS添加到您的导航样式中。

#nav{
 -webkit-backface-visibility: hidden;
}