Css Border-image With Transparent Image Shows An Edge On Android

This page http://wildlife.x-tremeteam.com utilizes the CSS border-image property and a .png image with a transparent edge to create a 'torn paper' look on my divs. It works great e

Solution 1:

I finally found it myself. Mostly.

It was the REPEAT value of the border-image properties.

After much testing with images and divs of different colors, I realized that all four sides (not the corners) were being slightly repeated in the other/wrong direction as well. So when my image was an orange box that was transparent at the outside edges, a tiny sliver of orange was being repeated on the outside edge. It did not happen on iPhone 6, just Android and possibly older iPhones.

In other words, for the top, the image was being repeated horizontally as needed. But it also repeated vertically just a little bit. I am guessing this is some sort of Android bug.

I fixed it by using STRETCH instead for smaller media queries. I don't like it but that's what worked.