iPad的WebKit边框图像的CSS渲染问题

Question

在网站上使用边框图像CSS属性是iPad上有奇怪的渲染工件（假设所有的iOS设备都有相同的问题）。它本质上是在图像根据css进行切片的地方添加一些小线条。查看图片作为参考：

做某些事情会导致行消失，如放大或移动我已经应用它的div。我假设这是移动Safari中的渲染错误，但是有没有人对如何解决它有任何想法/建议？

我想补充一点这个正确呈现在所有桌面浏览器支持的特性：Safari浏览器，浏览器，Firefox等

Answer 1

我敢肯定，如果你放大/缩小与Safari浏览器在桌面上的版本，你会看到同样的问题。有时候你会缩小像素的分数，webkit并不知道如何处理子像素。

尝试添加到你的头：

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

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

Answer 2

在缩放中完成的图像缩放似乎会从图像中的下一个像素中获取噪声（可能是舍入问题？）。向图像部分添加一个1px的缓冲区行。

Answer 3

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

我们发现，线消失了，当我们使用拉伸而不是重复或在边界图像值轮：因此，例如：

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

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

（玩弄那里的偏移值一点，因为该网站的作者方便使用已经具有背景色在iOS设备上，你会得到的透明线的无边框，图像）。

Answer 4

带边图像上启用硬件加速来解决这个问题：

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