CSS3高度过渡上的图像模糊答案

【问题标题】：Image blurs on CSS3 height transitionCSS3高度过渡上的图像模糊
【发布时间】：2017-01-02 09:59:09
【问题描述】：

我正在开发一个网站，可以在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);

【问题讨论】：

您是否知道您的徽标超过了两 000 个像素宽？
调整光栅图像的大小不可避免地会导致一些模糊。考虑改用矢量图形 (SVG)。
澄清一下，我指出这一点的原因是浏览器只能为您调整图像大小。它不是具有四种不同缩小方法的 Photoshop。如果您重新上传更接近最终 150px ~ 200px 大小的缩放版本，您的光栅化图像可能看起来会更好。让 Photoshop 或其他图像编辑器计算缩放而不是客户端浏览器。正如 Marat 指出的那样，向量也可能是一个好主意。
@JosephMarikle 我刚刚在您发表第一条评论后这样做了，将其调整为大约 200 像素宽，现在可以正常缩放。谢谢，解决了我的问题。你的解释也有帮助。如果您可以发布与您的答案相同的内容，我会标记它。再次感谢。
@MaratTanalin 如果我遇到更多问题，我会尝试，这暂时解决了我的问题。谢谢。

标签： html css google-chrome css-transitions

【解决方案1】：

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

【讨论】：