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

On Wed, Jun 25, 2014 at 3:45 PM, Lea Verou <lea@verou.me> wrote:

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

True and because background images on the root element draw differently,
authors get unexpected behavior.

We resolved this morning that background images on the root element should
not behave differently from other elements. They need to compose on an
initial transparent backdrop and then matted with the white background.


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