Search code examples
ioscssipadios10

CSS border-image not displaying on iOS10


Since iOS10, there seems to be a problem with the CSS border-image attributes.

I used to work with something like this:

border-image: url('data:image/png;base64,somedata') 30 30 30 stretch;

However, since updating to iOS10 on iPad (and I would guess on iPhone as well), the border-image is no longer visible, leaving it transparent.

This happens with Safari and Chrome browsers on iPad.

Here's a fiddle so you can see how it behaves on iPad vs computer: https://jsfiddle.net/g99y6pg3/1/

I also tried with a border-image: url(filename.png) instead of data:image/png, but got the same result.

Thanks for your help!


Solution

  • You need set property 'border-color' = 'white'