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

On Thu, Jun 19, 2014 at 11:29 PM, Alan Gresley <> wrote:

> 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.

This is unspecified behavior.
Prior to blending, this did not make a difference but now we need to know
that there could be another color 'layer' for the root element.

>  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'.

Yes, or if you use any color with 'screen', the content completely

>  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.

I agree that authors would prefer that the blending happens in a
transparent group. I'm unsure what that has to do with accessibility
though. Can you explain?

Received on Friday, 20 June 2014 16:43:13 UTC