W3C home > Mailing lists > Public > www-style@w3.org > December 2015

[css-backgrounds] Interoperability issues in border-image

From: Adenilson Cavalcanti <a.cavalcanti@samsung.com>
Date: Fri, 04 Dec 2015 20:19:48 +0000
To: "www-style@w3.org" <www-style@w3.org>
Message-id: <D287354E.4F9F%a.cavalcanti@samsung.com>
The border-image is a short-hand property that allows to create elements with an image as
its border instead of the predefined border styles and one of the
first spec versions dates way back to 2005

It has been supported as a prefixed property (i.e. -webkit-) by WebKit
since Safari 3.0 and its initial support landed about 10 years ago
(http://trac.webkit.org/changeset/10357), followed next by Firefox 3.5
(prefixed in 2009 and non-prefix in 2012) and IE 11 in 2013

As expected, the spec has evolved along the time and in 2012
some changes were made that would be incompatible withe previous
versions of the spec (http://dbaron.org/log/20120612-border-image).

That being said, both WebKit and Blink share a quirk that was brought
to discussion recently (https://lists.w3.org/Archives/Public/www-style/2015Nov/0260.html),
where an element with no border-style defined will have a border-image

>From the aforementioned discussion, that is against the spec
(http://www.w3.org/TR/css3-background/#border-style), quoting:
"None: No border. Color and width are ignored (i.e., the border has width 0)".

And yet from the same mail thread: "The fact that these properties set the style of the border is normative".

A test case for the quirk can be found at (correct result should be a green rectangle):

This quirk is hurting interoperability between web browsers specially
in mobile (where the dominant mobile OSes have as default a WebKit or
Blink based browser).

It currently affects Gecko in Android/FFOS (https://bugzilla.mozilla.org/show_bug.cgi?id=995140#c18)
as also MS Edge. In the later case, Edge was forced to implement the quirk which is a
regression from IE (https://github.com/whatwg/compat/issues/17) to be
able to correctly display gmail and gcalendar mobile versions.

I've uploaded a patch to fix both WebKit and Blink, links below:

After speaking with the envolved parties (Mozilla, Microsoft, Apple,
Google), it seems to be common interest in fixing this issue, which is why
I'm posting this message to help coordinate the work towards this

The preliminary numbers for Google Canary for
BorderImageWithBorderStyleNone are 0.15% of pages (i.e. 1 in 700
pages). The impact on websites should be minimal (i.e. the fix is a one-liner
border-style: solid) and any content that already correctly renders in
FF or IE should *not* be affected by this change in WebKit/Blink.

Looking forward to hear thoughts on the subject.

Best regards

Adenilson Cavalcanti
BSc. MSc.
WebKit/Blink/Servo committer
Received on Friday, 4 December 2015 20:20:23 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:58 UTC