Outline Color Property Invert Support

Hi everyone,

I’ve been looking at the invert value that can be used for CSS outline-color property. According to the documentation for this on MDN browser support is extremely poor. https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color#Browser_compatibility

According to the spec this is due to the caveat :

Conformant UAs may ignore the ‘invert’ value on platforms that do not support color inversion of the pixels on the screen. If the UA does not support the ‘invert’ value then the initial value of the ’outline-color’ property is the value of the ‘color’ property, similar to the initial value of the ‘border-top-color’ property.

Does anyone know more about this? What would be limiting adoption on certain browsers, why they would not wish to implement the feature etc?

It seems like something incredibly useful to me.

‘invert’ requires reading the pixel values of arbitrary content under the outline. As this content might be from multiple different GPU layers, this can be an incredibly expensive operation, for relatively little benefit.

The CSS blending and compositing features, which would naively suffer the same problem, only blend/composite within a given stacking context (which is a proxy for GPU layers - we need a stacking context in order to create a GPU layer, to ensure that nothing else can get “between” the elements painted to a given layer). Thus it’s possible to blend/composite efficiently, but not to do inverted outlines efficiently.

1 Like

Ah of course! I completely forgot about the possible layering inefficiency.

Thanks for clearing that up.

Spitballing here: it’d be nice if specs had links to rationales/discussions like these, even if it’s just non-normative links to messages on the mailing list / Discourse.

Edit: see https://github.com/stuartpb/wicg-best-practices/issues/2

One quick fix would be to change the wording in the spec:

Conformant UAs may ignore the ‘invert’ value on platforms that do not support color inversion of the pixels on the screen, or where calculating the color inversion is deemed as too expensive

Or, if there is some form of consensus among browsers that they can’t support this, deprecate it…

I don’t think there is total consensus about not supporting this, since IE does support it (and Presto did). However, the clarification you suggest is reasonable. I’ll slide it in into level 4.