Re: [fxtf-drafts] [filter-effects-1] What is the visual effect of filter() on the document element?

Following-up on the blend-modes issue:

I'm working with [this CodePen testcase](https://codepen.io/AmeliaBR/pen/1b81d0a95b70d5f03572f81624e6f209?editors=1100):
It has a red div that partially overlaps a white div and has `mix-blend-mode: difference`, which creates cyan when you blend with white.  The root background is a linear gradient that creates horizontal stripes of white and transparent (with a thin bit of gray in between so you know the background is there).  The default UA-controlled canvas layer shows through transparent stripes, and is usually also white.  We're interested in the color of the right half of the red div, where it overlaps these white/transparent stripes on the canvas. 

As anticipated on the call, every browser does this differently currently:

- Safari blends the red element with both the white stripes and the white UA background, equally.
- Chrome does *not* blend the red element with either layer of the canvas background.
- Firefox blends with the white stripes of the author supplied background, but not with the UA-supplied white canvas.

As Tab noted, there was a [resolution from 2014](https://lists.w3.org/Archives/Public/www-style/2014Jun/0398.html) to agree with @cabanier's proposal [here](https://lists.w3.org/Archives/Public/www-style/2014Jun/0280.html). That is specifically about `background-blend-mode` on a background image stack that is propagated to the canvas. It was agreed that the background stack would be isolated from the UA-supplied canvas.  That didn't get explicitly mentioned in the spec, but is consistent with the general guidance for `background-blend-mode` (the background stack is always isolated).  There is no guidance in that spec for how to handle `mix-blend-mode` and the UA-supplied canvas, resulting in the current inconsistencies.

But, since the current state is horribly inconsistent, the good news is that changing the spec (to make the colour of the UA-supplied canvas layer propagate to the author-controlled canvas layer if that layer has no author-supplied images or colors) probably won't have any negative web compat effects!

Making that change would mean that, for this specific test case (an author-supplied partially transparent root background image), you would blend with or filter the partially transparent layer and then composite over the "untouchable" UA-supplied canvas.

(And whatever gets decided here, we definitely need clarifying edits to Compositing and Blending, to match. And Backgrounds, for that matter.)

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/282#issuecomment-397019413 using your GitHub account

Received on Wednesday, 13 June 2018 17:25:45 UTC