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 except on my Android (Samsung SIII), whether I'm using its default browser or the Chrome app. On that I can see a slight edge on the inside and outside of the 20px border. Interestingly, I do not see the edge on the corners. The background of the div with the border is transparent. I only apply a background color to the div inside that.

Browsers on my desktop, the iPhone I use for testing and all renderings on responsinator.com don't show the edge of the image.

It must have something to do with the div's background-color property because if I set that to RED, the edges do turn red. However, making this property transparent won't remove it.

CSS is as follows, which also includes a default div property which did not help:

div {border: 0; border-style: none; }

.BoxGrunge {  
    border-color: #7777777; /* this won't really be seen */
    border-style: double;/* this won't really be seen */
    border-width: 20px 20px 20px 20px;
    -webkit-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    -moz-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    background-color: transparent; /* otherwise there is a white edge on Android */  /*THIS DOESN'T HELP */
    display: block !important;
    margin: 0 0 5px 0;
}

Thanks, I have been staring at this for hours and can't figure it out.

回答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.

来源：https://stackoverflow.com/questions/34008863/css-border-image-with-transparent-image-shows-an-edge-on-android

标签

android

css

transparency

border-image