Question

我的导航栏有以下代码：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.php" class="pull-left"><img src="images/logo.png" alt="" /></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Guides</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

这是处理图像缩小的jQuery：

$(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
        $('nav').addClass('shrink');
    } else {
        $('nav').removeClass('shrink');
    }
});

这是缩小图像的CSS：

.navbar-header img {
    height: 80px;
    transition: height 0.2s ease;
}
nav.shrink img {
    height: 60px;
    transition: height 0.2s ease;
}

问题是，当进行转换时，除了Firefox之外，所有浏览器中的图像都会丢失其抗锯齿功能。图像全是锯齿状，看起来很糟糕。

我尝试了以下修复：

将.show（）和.hide（）添加到jQuery
-webkit-backface-visibility：hidden;
outline：1px solid transparent;
-webkit-transform-style：preserve-3d;
-webkit-perspective：1000;
使图像背景为纯色而非透明

字面上没有任何作用。我已经看到主题这样做没有反锯齿问题，我迷失了为什么会发生这种情况。

非常感谢任何帮助。

Answer 1

在设置动画图像时我遇到了同样的问题，Chrome需要硬件加速来消除锯齿。在图像元素上使用以下行：

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

subject上的其他内容。

图像在高度转换后失去抗锯齿

1 个答案: