Border image stopped showing in Safari (OS and iOS)

问题

Border image stopped appearing in Safari on OS and iOS as well. I'm using Safari 10 on my Mac and latest version of iOS on my iPad and iPhone. It does show in Firefox the way it used show on all browsers.

Website URL is: http://majesticpinescolorado.com/

 #sidebar .inner{
border: 1px solid #8e8cae; 
-moz-border-image:url(images/border.png) 50 50 repeat; /* Old firefox */
-webkit-border-image:url(images/border.png) 50 50 repeat; /* Safari */
-o-border-image:url(images/border.png) 50 50 repeat; /* Opera */
border-image:url(images/border.png) 50 50 repeat;

}

I researched to see what I'm doing wrong, but all declaration seem to be correct. Any help is greatly appreciated.

回答1:

I found an answer to this exact problem here: border image not showing in safari. This is what it says:

"I was able to find a solution and wanted to share it in case somebody has the same problem. The problem was fixed by removing the border shorthand property and replacing it with border-style and border-width."

Such as this:

.borderWrap{

border-style: solid;
border-width: 34px;
border-image: url(../images/spriteOneFrame.png) 34 34 round;

}

Instead of:

.borderWrap{

border: solid 34px transparent;
border-image: url(../images/spriteOneFrame.png) 34 34 round;

}

回答2:

You need to give the border the same width as the border-image:

border: 50px solid transparent;

来源：https://stackoverflow.com/questions/41252600/border-image-stopped-showing-in-safari-os-and-ios

标签

ios

css

safari

border-image