Geek Answers Handbook

Website issue

Using the border-image css property on the site has strange rendering artifacts on the iPad (assuming all ios devices have the same problem). This essentially adds small lines where the image is sliced ​​according to css. See Image as a reference: alt text

Performing certain actions will lead to the disappearance of lines, such as scaling or moving the div to which I applied it. I assume this is a rendering error in mobile safari, but does anyone have any ideas / suggestions for fixing it?

I can add that this displays correctly in all desktop browsers that support the property: safari, chrome, firefox, etc.

+5
source share
4 answers

I am sure that if you zoom in using Safari in the Desktop version, you will see the same problem. Sometimes you increase the fraction of pixels, and webkit does not know what to do with subpixels.

Try adding to the head:

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

So the default view would be good. You can also disable zooming, but I would not recommend it unless it is specifically designed for the iPad.

+8
source

This bothered us for quite some time.

We found that the lines disappeared when we used stretching instead of repeating or rounding in the value of border-image: like this:

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

, http://border-image.com/ iOs .

( , , , iOS .)

+2

, , , (, ?). 1px .

+1

, :

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

0

More articles:


All Articles