【发布时间】：2012-07-30 21:17:44
【问题描述】：
Safari 中出现的奇怪问题。我将元素的背景设置为 SVG。这个 SVG 绘制在一个紧密的像素网格上，并且在大多数其他浏览器中都能完美显示，但由于某种原因，它在 Safari 中的缩放不正确。
这是我用来设置背景的 SASS：
@include background-size(100% 100%);
background: transparent image-url('icon-laptop.svg') no-repeat 0 0;
... 以及创建的 CSS：
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: transparent url('../images/icon-laptop.svg?1343856741') no-repeat 0 0;
我尝试将背景大小设置为 99.9%，这有点帮助，但在 每个 浏览器中都会变得模糊。
以下是 Chrome 和 Safari 中的结果：
关于可能发生什么的想法？
【问题讨论】：
-
这可能与这个错误bugs.webkit.org/show_bug.cgi?id=82645 有关，这似乎与 webkit 不想“破坏”SVG 的固有纵横比有关。您的图标与包含元素的纵横比是否相同？
-
嗨，克里斯。确实如此。我以与创建 SVG 时相同的大小渲染它。