图像渲染值有时会更新，有时不会

Question

我的页面上有一个最初很大的徽标，但是当您向下滚动时，它会变成一个小的标题徽标。我用一个 .tiny 类做到了这一点，它可以在滚动时切换。

$(window).on("scroll touchmove", function() {
  $('#logo').toggleClass('tiny', $(document).scrollTop() > 0);
});

使用 CSS：

#logo {
    width: 50%;
    left: 20vw;
    transition: ease-in-out .5s;
}

#logo.tiny {
    width: 230px;
    image-rendering:auto;
}

问题是，当徽标变小时，image-rendering:auto; 有时会更新，有时则不会。这对我来说似乎很随机。您可以清楚地看到image-rendering:auto; 处于活动状态和不处于活动状态时的区别。我正在用 chrome 测试它。 那是我的网站：http://www.lars-widmer.tk/sites/18/ 只需在开头确认幻灯片（没有任何危险发生；））然后您就可以看到徽标。 只需上下滚动几下，您就会发现有时看起来不错，有时看起来不太好。

Answer 1

试试这个：

#logo.tiny {
    width: 230px;
    transform: scale(1);
    zoom: 0;
}