Using the border-image css property on a site is having strange rendering artifacts on the iPad (assuming all ios devices have the same problem). It's essentially adding little lines where the image is getting sliced according to the css. See image as a reference: 
在网站上使用border-image css属性会在iPad上产生奇怪的渲染效果(假设所有ios设备都有同样的问题)。它实际上是添加了一些线条，在这些线条中，图像会根据css被分割。参考图片:
Doing certain things will cause the lines to disappear such as zooming in, or moving the div that I've applied it to. I'm assuming this is a rendering bug in mobile safari, but does anyone have any ideas/suggestions on how to fix it?
做一些特定的事情会导致行消失，比如放大或者移动我应用的div。我假设这是一个移动safari中的渲染错误，但是有人对如何修复它有什么想法和建议吗?
I might add that this renders correctly in all desktop browsers supporting the property: safari, chrome, firefox, etc.
我可以在所有支持此属性的桌面浏览器中正确地添加此渲染:safari、chrome、firefox等。
4 个解决方案
#1
8
I'm pretty sure if you zoom in/out with Safari on the Desktop version you will see the same problem. Sometimes you're zoomed fractions of pixels and webkit doesn't really know what to do with the subpixels.
我很确定如果你放大/缩小Safari在桌面版本你会看到同样的问题。有时你放大像素的部分，webkit不知道如何处理这些子像素。
Try adding to your head:
试着增加你的想法:
<meta name="viewport" content="initial-scale=1">
That way the default view will be good. You could also disable zooming, but I wouldn't recommend it unless it's a website designed specifically for the iPad.
这样，默认视图就会很好。你也可以禁用缩放，但我不会推荐它，除非它是专门为iPad设计的网站。
#2
2
This one has been bothering us for quite some time.
这件事已经困扰我们很久了。
We found that the lines disappeared when we used stretch instead of repeat or round in the border-image value: so for example:
我们发现，当我们在边框-图像值中使用拉伸而不是重复或圆形时，线条就消失了:
-webkit-border-image: url(image.png) 50 stretch;
You can test it yourself by going to http://border-image.com/ on your iOs device and switching the stretching parameter.
您可以在iOs设备*问http://border-image.com/并切换extend参数来测试它。
(Play around a bit with the offset values there, because the author of the site conveniently used a border-image that already has a background color where on the iOS device you would get the transparent lines.)
(在这里使用偏移值，因为站点的作者很方便地使用了一个边界图像，该图像已经有一个背景颜色，在iOS设备上，你可以得到透明的线条。)
#3
1
The image scaling done in zooming seems to take noise from the next pixels in the image (maybe a rounding problem?). Adding one 1px line of buffer to the image parts worked for me.
在缩放中进行的图像缩放似乎从图像中的下一个像素中获取噪声(也许是一个舍入问题?)在图像部分添加1px的缓冲区为我工作。
#4
0
Enable hardware acceleration on the bordered image to fix this issue:
在边框上启用硬件加速来解决这个问题:
-webkit-transform: translate3d(0, 0, 0)
-webkit-transform:translate3d(0,0,0)
#1
8
I'm pretty sure if you zoom in/out with Safari on the Desktop version you will see the same problem. Sometimes you're zoomed fractions of pixels and webkit doesn't really know what to do with the subpixels.
我很确定如果你放大/缩小Safari在桌面版本你会看到同样的问题。有时你放大像素的部分，webkit不知道如何处理这些子像素。
Try adding to your head:
试着增加你的想法:
<meta name="viewport" content="initial-scale=1">
That way the default view will be good. You could also disable zooming, but I wouldn't recommend it unless it's a website designed specifically for the iPad.
这样，默认视图就会很好。你也可以禁用缩放，但我不会推荐它，除非它是专门为iPad设计的网站。
#2
2
This one has been bothering us for quite some time.
这件事已经困扰我们很久了。
We found that the lines disappeared when we used stretch instead of repeat or round in the border-image value: so for example:
我们发现，当我们在边框-图像值中使用拉伸而不是重复或圆形时，线条就消失了:
-webkit-border-image: url(image.png) 50 stretch;
You can test it yourself by going to http://border-image.com/ on your iOs device and switching the stretching parameter.
您可以在iOs设备*问http://border-image.com/并切换extend参数来测试它。
(Play around a bit with the offset values there, because the author of the site conveniently used a border-image that already has a background color where on the iOS device you would get the transparent lines.)
(在这里使用偏移值，因为站点的作者很方便地使用了一个边界图像，该图像已经有一个背景颜色，在iOS设备上，你可以得到透明的线条。)
#3
1
The image scaling done in zooming seems to take noise from the next pixels in the image (maybe a rounding problem?). Adding one 1px line of buffer to the image parts worked for me.
在缩放中进行的图像缩放似乎从图像中的下一个像素中获取噪声(也许是一个舍入问题?)在图像部分添加1px的缓冲区为我工作。
#4
0
Enable hardware acceleration on the bordered image to fix this issue:
在边框上启用硬件加速来解决这个问题:
-webkit-transform: translate3d(0, 0, 0)
-webkit-transform:translate3d(0,0,0)