Bug 217900 – border-color: transparent breaks border-image rendering

• Component: CSS
• Status: RESOLVED FIXED

[Richard Hallas]

Created attachment 411733 [details]
Screenshot of Safari Technology Preview Release 114 (Safari 14.1, WebKit 15611.1.1.3) compared with Firefox 81.0.2; Firefox displays the border-image box correctly whereas Safari displays nothing.

Many pages on the website at www.careyblyton.com use border-image either to put a box around a block of fixed text at the top-right of the page, or to create a vertical divider between page areas. For example, on the page https://careyblyton.com/??=OpenLetter, the main area scrolls but there's a fixed block of text in the top-right corner, and this fixed text should be surrounded by a border.

The relevant CSS style definition includes the following code:
…
	-webkit-border-image: url(../img/border.png) 16 repeat;
	-moz-border-image: url(../img/border.png) 16 repeat;
	-o-border-image: url(../img/border.png) 16 repeat;
	border-image: url(../img/border.png) 16 repeat;
…

Safari, of course, correctly ignores the -moz- and -o- entries. However, the presence of border-image, which is now officially supported, also causes the -webkit-border-image line (included for compatibility with earlier versions of Safari) to be ignored. That is, Safari appears to obey the border-image line rather than the -webkit-border-image line… which in theory is indeed the correct behaviour.

Unfortunately, in reality, the -webkit-border-image line produces the correct effect, whereas the border-image line does not. If the border-image line is disabled, so that Safari falls back to observing the -webkit-border-image line, the results are correct. But if the border-image line is present and observed, Safari simply displays no border.

No other browser has this bug; Chrome, Brave, Vivaldi, Opera, Edge, Firefox etc. all display correctly.

[Radar WebKit Bug Importer]

<rdar://problem/70557217>

[Tyler Wilcock]

There are definitely inconsistencies with this property.  For example, given:

div {
    width: 400px;
    height: 400px;
    -webkit-border-image: url(house.jpg) 16 repeat;
    border-image: url(house.jpg) 16 repeat;
}

WebKit renders a 1px solid border image, while Chromium and Gecko render nothing.  Adding `border-style: solid` causes Chrome and Firefox to match WebKit.

However, this isn't the issue you're describing, and I haven't been able to reproduce it using just the above CSS and toggling you've described.

Can you please attach a minimal reproduction of this issue as a zip (HTML + image)?

[Smoley]

Apple internal see also rdar://58451473

[Simon Fraser (smfr)]

The 'border-color: transparent;' is breaking it.

[Simon Fraser (smfr)]

Created attachment 412386 [details]
Testcase

[Simon Fraser (smfr)]

Various bugs here. Compare https://codepen.io/smfr/pen/mdEWNEQ with other browsers.

[Simon Fraser (smfr)]

First issue is that style().hasVisibleBorder() is wrong with transparent colors and border-image.

[Simon Fraser (smfr)]

<rdar://problem/58451473>

[Richard Hallas]

Created attachment 412442 [details]
Simple demo of the problem using code and border image extracted from the site that exhibits the problem (www.careyblyton.com)

Tyler Wilcock requested a minimal reproduction of this bug as a single HTML file and image. I apologise for not having been able to do this sooner, but here it is.

[Simon Fraser (smfr)]

Thanks. In the meantime, removing border-color:transparent from your content should fix it.

[Richard Hallas]

Very many thanks for the assistance. Removing border-color:transparent does indeed fix the site's problems.

[Simon Fraser (smfr)]

r281724 might make this easier to fix now.

[Simon Fraser (smfr)]

Indeed this is fixed in STP.