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

我的导航栏有以下代码：

<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>

以下是图像收缩的CSS：

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

.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背面可见性：隐藏
• 外形：1px实心透明
• -webkit变换样式：保留-3d
• -webkit透视图：1000
• 使图像背景为纯色而非透明

事实上，什么都不管用。我见过themes这样做时没有抗锯齿问题，我不明白为什么会发生这种情况

---

任何帮助都将不胜感激。

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

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

---

还有一些。我认为你对此无能为力。当显示图像的大小或比率不是原始文件的大小或比率时，浏览器将对其重新采样。图像的质量将完全取决于浏览器使用的重采样方法。为什么此主题上的徽标在调整大小时（向下滚动以查看其调整大小）不会丢失抗锯齿功能？该站点使用响应式样式表。图像的来源会随着分辨率的不同而变化，而不是动态调整大小。小提琴总是让事情变得更容易。无论如何，尝试添加

转换：translate3d（0,0,0）到图像。@Rorymcrossan我说的是当用户向下滚动页面时徽标大小的变化，而不是它的响应样式声明。转到我发布的URL，查看左上角的“canvas”徽标，然后向下滚动页面。它可以更改大小，并且不会丢失抗锯齿。