Question

我正在开发一个网站，可能会看到演示here。我面临的问题是当滚动时徽标的高度减小时，它在大部分时间都会略微模糊。当我再次向上滚动时，同样的事情发生了，徽标恢复到原始大小。这种情况发生在Chrome和IE（Edge）中，但在Firefox中运行良好。

我猜它正在发生，因为应用了CSS3过渡。如果我删除过渡，它可以很好地缩放。

transition: all 0.3s ease-in-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: initial;

应用转换的属性是height。

最初：height: 3.125rem; 滚动时：height: 2.375rem;

我已尝试在here下添加以下内容，但它无效。实际上，添加以下内容会使我的图像在加载时稍微模糊，即使没有任何滚动。

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

还有：

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

Answer 1

浏览器只能为您调整图像大小。它不是具有四种不同降尺度方法的Photoshop。如果重新上载更接近最终150px~200px大小的缩放版本（可能在该范围的200px侧），您的栅格化图像可能看起来更好。让photoshop或其他图像编辑器找出缩放而不是客户端浏览器。 Marat指出，矢量也可能是一个好主意。

CSS3高度过渡时图像模糊

1 个答案: