html - WebKit 图像在调整大小时出现锯齿状

Question

当在 WebKit 中调整图像( Logo )大小时，我们遇到了一个问题，它会出现几秒钟的锯齿状。我们尝试通过更改 CSS 中的宽度和使用缩放转换来调整它的大小。有什么办法可以解决这个问题吗？

http://codepen.io/Znarkus/pen/xbxKLK

示例 HTML:

<div>
  <img src="http://i.imgur.com/LoN4Mnz.png">
</div>

CSS:

div {
  width: 300px;
  height: 100px;
  background: #ddd;
}

img {
  max-width: 100%;
}


div:hover img {
  width: 200px;
}

Answer 1

这似乎是延迟很短的图像的抗锯齿问题。我的搜索没有就如何解决这个问题给出任何好的答案，所以我提出了两种可能的解决方案。

解决方案一

预渲染图像的两个版本，然后在不同尺寸之间切换。

优点:完美渲染

缺点:占用更多内存

方案二

用户image-rendering禁用抗锯齿的 CSS 属性。通过将 image-rendering: [browser specific see codepen fork]; 添加到 div，您可以看到图像的渲染效果不如没有抗锯齿效果好。

优点:全 CSS，无额外内存消耗

缺点:图像质量较差

http://codepen.io/anon/pen/XJWrvJ

编辑:解决方案 3

第二，可能会有不同的解决方案。图像不是特别适合呈现文本，但由于它是一个 Logo ，我猜你对文本或样式有某种特殊的扭曲。如果您可以将 Logo 导出为 svg 并将其呈现在 Canvas 中，您也许能够解决这些问题。