Re: [compositing] background-blend-mode on the root element

On 20/06/2014 12:40 PM, Rik Cabanier wrote:
> All,
>
> the background-blend-mode [1] property recently landed in Firefox and
> Chrome and we noticed that a very common design is to use it to create
> patterns with gradients. [2]
>
> The spec states:
>
> Each background layer must blend with the element’s background layer that
> is below it and the element’s background color. Background layers must not
> blend with the content that is behind the element, instead they must act as
> if they are rendered into an isolated group.
>
>
> This works for most elements except for the root element which has a
> different paint order [3]:

It's not a different painting order but different painting method.

> The background of the root element becomes the background of the canvas and
> covers the entire canvas, anchored (for 'background-position') at the same
> point as it would be if it was painted only for the root element itself.
> The root element does not paint this background again.

Note that the root element may not be <html> but something like <svg> or 
possibly <any-name-element> if using XML. This is why the spec mentions 
root element here since CSS can style different web languages.

> All browsers implement painting of the root backdrop by drawing the
> background color and images on top of a 100% opaque white backdrop.

This is not quite true. In the Firefox setting for 'Content > Colors', 
IE setting 'Appearance > Colors' and Opera setting for 'Preferences > 
Webpages', I can change the background/backdrop of the root element to 
at least a minimum of 70 colors. Internally, each UA has a hidden 
element wrapping the root element. For old Opera (not sure about Blink), 
this was a black backdrop.

> Because of this, background images that would blend with transparency
> (which doesn't change the color), now blend with white and display
> differently.

Agree. An image with semi-transparent red rgba(255,0,0,0.5), the blended 
color would paint an opaque 'salmon'. If a user had white text and black 
background/backdrop for accessibly reasons, the blended color would 
paint opaque 'maroon'.

> My question is, should we keep it as specified and make a note in the spec
> that the root element behaves differently, or should we fix the
> implementation so background images blend on a transparent backdrop
> followed by matting and clarify the paint order in css colors?
>
> I think authors would prefer the latter but they can work around it if
> needed.

For accessibly reasons, background images should blend on a transparent 
backdrop.


> 1: http://dev.w3.org/fxtf/compositing-1/#background-blend-mode
> 2: http://codepen.io/adobe/pen/6bc59f6e296119ff0282cd37a6fd3c22
>      http://bennettfeely.com/gradients/
> 3: http://www.w3.org/TR/CSS2/colors.html#background




-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Friday, 20 June 2014 06:30:30 UTC