iPad webkit border-image css rendering problem

Question

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:

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?

I might add that this renders correctly in all desktop browsers supporting the property: safari, chrome, firefox, etc.

Answer 1

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.

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.

Answer 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.

(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.)

Answer 3

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.