Re: [css3-ui] Outline interoperability

On Dec 9, 2014, at 5:46 AM, Florian Rivoal <florian@rivoal.net> wrote:

> This includes Issue 51 (https://wiki.csswg.org/spec/css3-ui#issue51), but is significantly broader.
> 
> How and where the outline is defined in very loose terms, and implementations vary widely, leading to numerous interoperability issues.

One of the biggest interop issues with outline I think is the behavior of “outline: auto”, which, in WebKit, is tuned to give focus-ring behavior. This affects some of the behaviors you tested below.

> 
> Question 1: Do we want to work on reducing the amount of differences, or are we happy giving leeway for different quality of implementations / room for innovation?
> 
> Question 2: If we want to solve this, do we want to solve this in level 3?
> 
> My take on this is that we should work on reducing differences because interoperability is good for authors, and because excessive differences in behaviour make it hard to spec extensions like outline-offset or outline-radius. However, we should solve this in level 4, because this is a large effort, and trying to address it in level 3 would delay it by quite a bit (significant spec work, larger test suite, many changes in several implementations).
> 
> Just to illustrate the point, here are some examples. I am sure there are more, but that's a already a bunch.
> 
> Does the outline include overflowing children of the outlined element?
> - Firefox: yes, with a larger rectangle
> - Safari/Chrome: no

Actually, in WebKit it does, if outline style is “auto” (which gives a focus-ring style appearance).

> - IE: sometimes, with a non rectangular shape
> - Presto: yes, with a non rectangular shape
> http://jsbin.com/jujuno/1/watch (IE: no)
> http://jsbin.com/jefah/1/watch (IE: no)
> http://jsbin.com/yovome/1/watch (IE: no)
> http://jsbin.com/honato/1/watch (IE: no)
> http://jsbin.com/hiwuna/1/watch (IE: yes)
> 
> Does outline-offset on an outlined element put an offset around the outlined element only, or around its overflowing children as well:
> - Safari/Chrome: N/A, overflowing children are not taken into account)

Yes, if outline style is “auto”.

> http://jsbin.com/qonazu/1/watch
> 
> Does outline-offset on an child of an outlined element influence the outline
> - Firefox/Safari/Chrome: no
> - Presto: yes
> - IE: N/A, outline offset not supported
> http://jsbin.com/gudola/1/watch
> 
> Is the outline of a transformed element transformed?
> - Firefox/Safari/Chrome/IE: yes
> - Presto: no
> http://jsbin.com/zuwuj/1/watch
> 
> How does the outline of a fragmented inline element look:
> - Firefox: one rectangular outline per fragment
> - IE/Safari/Chrome/Presto: One non-rectangular shape for the whole element
> http://jsbin.com/sulobe/1/watch
> 
> If an outlined element is behind another element, is the outline itself behind as well:
> - Firefox/Chrome/Safari/IE: Yes if the elements are in different stacking contexts
> - Presto: No regardless of stacking contexts
> http://jsbin.com/wejiri/1/watch (*: No)
> http://jsbin.com/ketoko/1/watch (*: Yes, Presto: No)
> 
> If an outlined element is behind another element in terms of z-index, but in front in terms fo 3d transforms, is the outline behind or in front
> - Firefox/Chrome/IE: behind if transform-style:flat, in front if transform-style:preserve-3d
> - Safari: in front regardless of transform-style
> - Presto: N/A, 3d transforms not supported
> http://jsbin.com/qivovi/1/watch (*: behind, Safari: in front)
> http://jsbin.com/vakur/1/watch (*: in front)

Simon

Received on Tuesday, 9 December 2014 18:36:16 UTC