【发布时间】：2017-04-20 14:04:38
【问题描述】：
我创建了以下代码笔来演示该问题：
http://codepen.io/perrin4869/pen/rWdWMm
在 Chrome、Firefox 和 IE11 中，它按预期工作 - 背景水平重复。但是，在 Safari 中，在文档的特定高度，例如 439px，您可以看到 svg 背景图像的重复之间的间隙...
我尝试更改 svg 的设置，例如使 width、height、viewport 值全部为整数，并尝试使用所有可能值的 preserveAspectRatio 属性，但差距仍然存在......
任何人都知道为什么会发生这种情况，以及如何解决这个问题？谢谢！
【问题讨论】：
-
我只能猜测（手头没有 safari :-( )...但是在您的 svg 中尝试 shape-rendering="crispEdges"。这可能会有所帮助...如果出现差距，这会有所帮助在一个 svg 文件中的形状之间。我不知道它是否对外部有帮助...
-
@HolgerWill，感谢您的回复！我试过你的建议，但没有奏效=/
-
嗯，值得一试。感谢您的反馈，很高兴知道...
-
您在 SVG 中指定
preserveAspectRatio="none"。这可能会帮助您解决问题，但问题是您还指定了与您的viewBox完全相同的width和height。所以preserveAspectRatio无效。尝试将width和height都更改为"100%"。 -
@PaulLeBeau 感谢您的建议！实际上，如果没有
preserveAspectRatio="none"，我确实会遇到一些故障。我也尝试了您的建议，将width="100%"和height="100%"设置为preserveAspectRatio="xMinYMin slice"，但差距仍然存在。试着玩了一下preserveAspectRatio，但没有运气......
标签： css svg safari background-image