iPhone端重复平铺SVG背景出现间隙问题求助

我正在实现“信纸”视觉效果，使用一条简单的水平线保存为SVG并设置为重复平铺背景。其他设备显示正常，但在iPhone上能看到重复瓦片之间存在小间隙，我对此原因感到困惑，且所有尺寸均设置为整像素。

我的SVG代码 #

<svg enable-background="new 0 0 108 108" viewBox="0 0 108 108" xmlns="http://www.w3.org/2000/svg">
    <path d="m0 107h108" fill="none" stroke="#000" stroke-width="1px" vector-effect="non-scaling-stroke"/>
</svg>

我的CSS代码 #

h2 {
    font-size: 11.5vw;
    line-height: 1.5em;
    background-image: url("images/lines.svg");
    background-size: 1.5em;
}

间隙截图 #

更新疑问 #

在小屏幕尺寸下，font-size实际为11.5vw，这会导致字号非整像素，进而使背景尺寸也非整像素——这是否是间隙产生的原因？

原因与解决方案 #

你猜的没错，非整像素的背景尺寸就是iPhone上出现间隙的核心原因。

iPhone搭载的WebKit渲染引擎在处理亚像素级别的背景尺寸时，会因为精度计算偏差，导致平铺的SVG瓦片之间出现微小缝隙。尤其是当SVG本身的尺寸和缩放后的背景尺寸无法精确对齐时，这种问题会被放大。

针对这个问题，有几种可行的解决方式：

1. 强制背景尺寸为整像素
   利用CSS的round()函数把background-size计算值四舍五入到最近的整像素，避免亚像素渲染误差：

   h2 {
       font-size: 11.5vw;
       line-height: 1.5em;
       background-image: url("images/lines.svg");
       background-size: round(1.5em);
   }
   

2. 优化SVG的结构
   你的SVG中线条距离底部还有1px，缩放时容易出现边缘渲染问题。可以简化SVG，让线条和容器边界完全贴合：

   <svg viewBox="0 0 108 1" xmlns="http://www.w3.org/2000/svg">
       <path d="M0 0h108" fill="none" stroke="#000" stroke-width="1" vector-effect="non-scaling-stroke"/>
   </svg>
   

   这样SVG高度就是1px，和线条高度一致，减少缩放时的计算误差。

3. 用CSS渐变替代SVG
   对于这种简单的水平线平铺，纯CSS渐变的渲染一致性更好，还能省去SVG文件的加载：

   h2 {
       font-size: 11.5vw;
       line-height: 1.5em;
       background-image: linear-gradient(to bottom, transparent calc(100% - 1px), #000 1px);
       background-size: 100% 1.5em;
   }
   

内容的提问来源于stack exchange，提问作者user2991837