Microsoft Edge 中的像素化图像缩小尺寸

我最近为我的网站制作了一个分辨率为 400x400 的徽标。在我测试过的任何其他浏览器中，它可以缩小到 40x40，但在 Edge 中表现得很奇怪。每次刷新页面时，它都会在瞬间正确呈现，然后在页面完成加载后变为丑陋的像素化外观。

页面完全加载之前的外观（以及我希望它的外观）：

页面加载完成后的样子：

HTML:

<img src="/images/logo.png" class="logo">

CSS:

.logo {
    width: 40px;
    height: 40px;
}

编辑：这是一个JSfiddle https://jsfiddle.net/ypqLb2jj/重现我的问题。

图像质量较差的缩小是 Edge 中的一个已知问题，并且已经存在多年。

我也可以证实您也曾看到过平滑重新缩放的图像的短暂闪烁。有时，只是有时，图像似乎保持平滑缩放！ （似乎确实重现问题的一种方法是重新调整图像大小after页面已加载，例如将 JSfiddle 中的大小设置为 50x50px - 在 Edge 中，图像会调整大小并且看起来很糟糕，但在其他浏览器中结果很流畅。）

该问题实际上早于 Edge 发布。最近微软似乎在摆弄它，但他们肯定没有修复它。这是 MS 论坛上关于此问题的帖子（请注意，有些人非常奇怪地希望问题消失，并将其归咎于显卡！）：https://social.technet.microsoft.com/Forums/ie/en-US/e800cbaf-a539-43ba-b5f9-1d29fe709ddc/the-awful-internet-explorer-image-renderengine https://social.technet.microsoft.com/Forums/ie/en-US/e800cbaf-a539-43ba-b5f9-1d29fe709ddc/the-awful-internet-explorer-image-renderengine

这是 2015 年 8 月关于这个问题的另一篇文章，所以这绝对不是什么新鲜事！https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal

真正深入挖掘历史，这是另一个 2013 年的演示！https://bug486918.bmoattachments.org/attachment.cgi?id=428179 https://bug486918.bmoattachments.org/attachment.cgi?id=428179

（该演示来自 2013 年 MS 博客文章的评论：https://blogs.msdn.microsoft.com/ie/2013/09/12/using-hardware-to-decode-and-load-jpg-images-up-to-45-faster-in-internet-explorer- 11/ https://blogs.msdn.microsoft.com/ie/2013/09/12/using-hardware-to-decode-and-load-jpg-images-up-to-45-faster-in-internet-explorer-11/所以这个问题已经被讨论了至少四年了！）

至少自 2016 年 11 月以来，Edge 团队已两次报告并确认同一问题为错误，但没有修复...

1 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9869140/ https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9869140/

2 - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14420925/ https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14420925/

SO 上还有其他几篇关于它的帖子。

一种可能的解决方案似乎相当 OTT，将图像添加到画布并重新缩放，但如果您有超过一两张图像，这可能会导致严重的滞后：https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

唯一真正的解决方案似乎是等到微软修复这个问题。现在就来赌哪一年吧！