Safari 按比例渲染内联块的问题

Question

这是杯子预览图：

预览显示其他 div 包含的内容，但按比例缩小了 0.2。为了模拟杯子的表面曲线，我使用了一种技术，其中预览块的宽度 = 原始宽度 * 0.2，它们通过 scaleX 变换缩放 0.6、0.8、1、0.8。 0.6。

它工作正常（由于跨浏览器兼容性，我不能使用 html5 画布，这是一项要求），但是，正如您在附加图像上看到的（顶部图像来自 chrome，底部来自 safari），safari 呈现不需要的光线.没有什么帮助 - 绝对定位，将一个块放在另一个块上以隐藏那条光线。这是safari特有的问题，可能是因为在transformX块的边缘被抗锯齿之后，因为scaleX，侧面的边缘变得更加明亮。其他浏览器不这样做。

有谁知道如何解决这个问题以在 safari 中没有这些行的情况下进行渲染？

Answer 1

尝试使用background-size 而不是transform: scale。