Spec -webkit-border-image

[miketaylr]

It's one of the -webkit- prefixes supported by Edge, and a number of high priority mobile sites depend on it (goog calendar and gmail being two).

According to Chrome platform status, usage currently hovers right around 1% of page loads:
https://www.chromestatus.com/metrics/css/timeline/popularity/196

http://dbaron.org/log/20120612-border-image is a good resource for why this can't be a simple alias to unprefixed border-image.

Here's a simple test page with some code from google calendar: http://jsbin.com/gafinudopa/4/edit?html,css,output.

Both Chrome and Edge have the same output.

@jacobrossi - is there someone who worked on -webkit-border-image who would be willing to share notes on how y'all implemented it?

[miketaylr]

(They could email me at miket@mozilla.com if they're more comfortable with less public feedback. 🙈 ❤️)

[miketaylr]

A Blink UseCounter just landed today to track "border-image overriding border-widths" (see https://code.google.com/p/chromium/issues/detail?id=356802): https://chromium.googlesource.com/chromium/src.git/+/235538d4c5836ab7651ae54ce04360eca362089d

[miketaylr]

https://code.google.com/p/chromium/issues/detail?id=559258#c14 suggests that Edge has added bug compatibility with Blink/WebKit's current "(unprefixed) border-image overrides border-style" bug... but it sounds like they are willing to revert if some Google properties are fixed?

In order for -webkit-border-image to work as an alias to unprefixed border-image these quirks would have to be added, which seems not good.

[foolip]

CC @doomdavve

[miketaylr]

It looks like WebKit just fixed their "border-image doesn't honor border-style" bug today: https://bugs.webkit.org/show_bug.cgi?id=99922

[karlcow]

They still have a couple of issues with tests on windows.
I also wonder if the fix breaks some sites.

[miketaylr]

I also wonder if the fix breaks some sites.

It's possible. (cc @Adenilson who wrote the WebKit + Blink patches).

[Adenilson]

@karlcow The windows bot failure is not an issue anymore.

That being said, I just tested mobile gcalendar and it will fail (i.e. not render rounded buttons) in both Blink and WebKit patched.

I think the solution here is to push google to fix their code (i.e. gcalendar/gmail) otherwise all web engines (Edge, FF, WebKit, Blink) will be stuck having to support the quirk.

Please see attached screeenshots.

[karlcow]

+1 to push Google. It's one of the issue identified in
https://bugzilla.mozilla.org/show_bug.cgi?id=914252#c17
https://bug914252.bmoattachments.org/attachment.cgi?id=8689920

[Adenilson]

Just confirmed that MS Edge had to implement the quirk, please see attached screenshots.

[miketaylr]

(Note here for future self, which is probably obvious to everyone except me: Blink/WebKit browsers never shipped longhand -webkit- prefixed border-image properties. Just the shorthand).

[Adenilson]

Just posted this in www-style:
https://lists.w3.org/Archives/Public/www-style/2015Dec/0080.html

[Adenilson]

For reference, the intent to implement in Blink:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/J7rvFkcn8TU