CSS 背景图像在 Safari 上显示不同

Question

我有一个使用

background-image

和

background-position

CSS 属性显示的 SVG 图像。它在 Chrome/Firefox 上按预期显示，但在 Safari 上呈现完全不同。

如果您在 Chrome 和 Safari 中打开此沙箱，您可以看到差异。如果全屏显示，背景图像会显示在 Safari 上，但

background-position

似乎不适用。

此外，即使我们删除

background-position

属性，Chrome 和 Safari 上的默认图像定位也是不同的。

为什么会出现这种差异以及如何解决它？

Answer 1

我将

background-size: cover

添加到

.test

，并且 Chrome 和 Safari 之间的样式看起来相同。

链接