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