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

I wasn’t able to attend today’s call, but I was planning to mention that authors use blending with transparent colors for fade animations between a blended image and a normal image, since *-blend-mode is not animatable [1][2].

~Lea

[1]: http://demosthenes.info/blog/888/Create-Monochromatic-Color-Tinted-Images-With-CSS-blend
[2]: http://codepen.io/dudleystorey/pen/vrwcl


On Jun 20, 2014, at 05:40, Rik Cabanier <cabanier@gmail.com> 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]:
> 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