Safari 变换：scale()，由 JS 添加时图像质量不佳

Posted 2023-03-04

【中文标题】Safari 变换：scale()，由 JS 添加时图像质量不佳

【英文标题】：Safari transform: scale(), bad image quality when added by JS

【发布时间】：2021-11-26 06:52:00

【问题描述】：

我有一个 javascript 函数，它向图像添加“变换：翻译（x，y）比例（z）”。但是通过这种方式，safari 并没有显示出清晰的图像，而是似乎降低了。

在 Firefox 和 Chrome 中运行良好。但是当我在开发工具中手动添加“transform: translate(x, y) scale(z)”时，图像会按我的预期显示。锋利又漂亮。

这可能是什么原因？

Image with low sharpness

Image with height sharpness

希望你能帮帮我。

【参考方案1】：

我通过将变换属性直接添加到图像来解决了这个问题。之前，它被添加到图像的包装元素中。

现在还可以，但是当我想象一种情况时，我不得不在其中包含图像的 div 上使用变换比例时，这是 safari 的愚蠢行为。

【讨论】：

似乎只适用于 MacOS 下的 Safari。在 ios 上，该错误仍然存​​在。

杰克的回答很好：***.com/a/55916005/16332047