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

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 之外的所有浏览器中都失去了抗锯齿功能。图像变得参差不齐，看起来很糟糕。

我尝试了以下修复:

• 在 jQuery 中为图像添加 .show() 和 .hide()
• -webkit-backface-visibility: hidden;
• 轮廓:1px实心透明；
• -webkit-transform-style: preserve-3d;
• -webkit-perspective: 1000;
• 将图像背景设为纯色而不是透明

实际上没有任何作用。我已经看到主题在没有抗锯齿问题的情况下做到了这一点，但我不明白为什么会这样。

如有任何帮助，我们将不胜感激。

Answer 1

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

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

关于 subject 的更多信息.