Bug 217900

Summary:

border-color: transparent breaks border-image rendering

Product:

WebKit

Reporter:

Richard Hallas <Richard>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

koivisto, simon.fraser, smoley, twilco.o, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac

OS:

macOS 10.15

Attachments:

Description	Flags
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.	none
Testcase	none
Simple demo of the problem using code and border image extracted from the site that exhibits the problem (www.careyblyton.com)	none

Description Richard Hallas 2020-10-19 04:24:37 PDT

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.

Comment 1 Radar WebKit Bug Importer 2020-10-21 19:54:44 PDT

<rdar://problem/70557217>

Comment 2 Tyler Wilcock 2020-10-21 21:26:42 PDT

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)?

Comment 3 Smoley 2020-10-26 18:38:20 PDT

Apple internal see also rdar://58451473

Comment 4 Simon Fraser (smfr) 2020-10-26 21:23:18 PDT

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

Comment 5 Simon Fraser (smfr) 2020-10-26 21:28:24 PDT

Created attachment 412386 [details]
Testcase

Comment 6 Simon Fraser (smfr) 2020-10-26 21:45:16 PDT

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

Comment 7 Simon Fraser (smfr) 2020-10-26 21:46:13 PDT

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

Comment 8 Simon Fraser (smfr) 2020-10-27 09:35:55 PDT

<rdar://problem/58451473>

Comment 9 Richard Hallas 2020-10-27 10:36:39 PDT

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.

Comment 10 Simon Fraser (smfr) 2020-10-27 10:38:25 PDT

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

Comment 11 Richard Hallas 2020-10-27 14:53:24 PDT

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

Comment 12 Simon Fraser (smfr) 2022-01-06 21:21:44 PST

r281724 might make this easier to fix now.

Comment 13 Simon Fraser (smfr) 2022-01-06 21:44:13 PST

Indeed this is fixed in STP.