iPad webkit border-image css渲染问题

Question

在网站上使用border-image css属性在iPad上有奇怪的渲染工件（假设所有ios设备都有相同的问题）。它实际上是根据css添加了很少的线条，其中图像被切片。参见图片作为参考：

执行某些操作会导致线条消失，例如放大或移动我应用它的div。我假设这是移动游猎中的渲染错误，但有没有人对如何解决它有任何想法/建议？

我可以补充一点，这在所有支持该属性的桌面浏览器中都能正确呈现：safari，chrome，firefox等。

Answer 1

我很确定如果您在桌面版上使用Safari放大/缩小，您会看到同样的问题。有时你会缩放像素的分数，而webkit实际上并不知道如何处理子像素。

尝试添加到你的脑袋：

<meta name="viewport" content="initial-scale=1">

这样默认视图就会很好。您也可以禁用缩放，但除非是专门为iPad设计的网站，否则我不会推荐它。

Answer 2

这一直困扰我们很长一段时间。

我们发现当我们在border-image值中使用 stretch 而不是重复或 round 时，这些行消失了：例如：

-webkit-border-image: url(image.png) 50 stretch;

您可以通过转到iOs设备上的http://border-image.com/并切换拉伸参数来自行测试。

（在那里使用偏移值稍微玩一下，因为该网站的作者方便地使用了已经具有背景颜色的边框图像，在iOS设备上您将获得透明线。）

Answer 3

在缩放中完成的图像缩放似乎会从图像中的下一个像素中获取噪声（可能是舍入问题？）。为图像部件添加一个1px缓冲线为我工作。

Answer 4

在有边框图像上启用硬件加速以解决此问题：

-webkit-transform: translate3d(0, 0, 0)