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.
<rdar://problem/70557217>
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)?
Apple internal see also rdar://58451473
The 'border-color: transparent;' is breaking it.
Created attachment 412386 [details] Testcase
Various bugs here. Compare https://codepen.io/smfr/pen/mdEWNEQ with other browsers.
First issue is that style().hasVisibleBorder() is wrong with transparent colors and border-image.
<rdar://problem/58451473>
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.
Thanks. In the meantime, removing border-color:transparent from your content should fix it.
Very many thanks for the assistance. Removing border-color:transparent does indeed fix the site's problems.
r281724 might make this easier to fix now.
Indeed this is fixed in STP.