滚动时导航栏模糊

Blurry Nav Bar when scrolling

本文关键字：模糊 导航 滚动      更新时间：2023-09-26

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

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

提前感谢！

编辑：似乎问题只与Chrome有关。 不知道为什么。

Edit2：这是一个带有问题 http://www.screenr.com/mVEH 的视频屏幕截图

Chrome在

渲染固定元素时存在一些问题。

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

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

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

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

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

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

铬仍然有一个未解决的错误问题。

如果您谈论的是虚线边框下方的破碎背景，请在给定的 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;
}

这是你要找的吗？

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

#nav{
 -webkit-backface-visibility: hidden;
}
相关文章：