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

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]:

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.

All browsers implement painting of the root backdrop by drawing the
background color and images on top of a 100% opaque white backdrop.
Because of this, background images that would blend with transparency
(which doesn't change the color), now blend with white and display
differently.

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.

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

Received on Friday, 20 June 2014 02:40:51 UTC