在网站上使用border-image css 属性会在iPad 上出现奇怪的渲染伪影（假设所有ios 设备都有相同的问题）。它本质上是在根据 css 对图像进行切片的地方添加小线。请参阅图像作为参考：
执行某些操作会导致线条消失，例如放大或移动已应用它的 div。我假设这是移动 safari 中的渲染错误，但有人对如何修复它有任何想法/建议吗？
我可能会补充一点，这在所有支持该属性的桌面浏览器中都能正确呈现：safari、chrome、firefox 等。
【问题讨论】：
在有边框的图像上启用硬件加速以解决此问题：
-webkit-transform: translate3d(0, 0, 0)
【讨论】：
这个问题困扰我们很久了。
我们发现当我们在border-image值中使用stretch而不是repeat或round时线条消失了：例如：
-webkit-border-image: url(image.png) 50 stretch;
您可以通过在您的 iOs 设备上转到 http://border-image.com/ 并切换拉伸参数来自行测试。
（稍微调整一下那里的偏移值，因为该网站的作者方便地使用了一个已经有背景颜色的边框图像，在 iOS 设备上你会得到透明线。）
【讨论】：
在缩放中完成的图像缩放似乎会从图像中的下一个像素中获取噪声（可能是舍入问题？）。向图像部分添加一行 1px 的缓冲区对我有用。
【讨论】：
我很确定如果您在桌面版上使用 Safari 放大/缩小，您会看到同样的问题。有时您会放大几分之一的像素，而 webkit 并不真正知道如何处理这些子像素。
尝试添加到你的脑海中：
<meta name="viewport" content="initial-scale=1">
这样默认视图会很好。您也可以禁用缩放，但除非它是专为 iPad 设计的网站，否则我不会推荐它。
【讨论】：
.svgs 在 ios 上工作，但是当我切换到使用 .png 时，在我稍微调整了 slice 值后一切正常