[fxtf-drafts] [filter-effects-2] Backdrop filter clipping with edgeMode="duplicate" creates discontinuity when moving. (#374)

flackr has just created a new issue for https://github.com/w3c/fxtf-drafts:

== [filter-effects-2] Backdrop filter clipping with edgeMode="duplicate" creates discontinuity when moving. ==
[Section 3: Backdrop Root](https://drafts.fxtf.org/filter-effects-2/#BackdropRoot) step 4 clips the backdrop output to the backdrop's quad, and [Section 2.1: Filtering and Clipping](https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation) specifies that the blur filter is applied with edgeMode="duplicate". The result of this is that when the edge of the backdrop filter is over a small portion of another color, the color is duplicated and heavily weighted in the resulting blur.

When the backdrop filter is sliding this results in an odd discontinuity where all of the sudden new colors intrude into the blur - see [crbug.com/978031](https://crbug.com/978031). I think this is a fairly common use case for titlebars or draggable content or stationary content atop a scrolling background.

The effect is even worse if the backdrop-filter element slides over a thin line - https://jsbin.com/judusoq/edit?html,css,output where you see a flicker of that color heavily weighted and then it goes away as the element slides further.

I propose that we use a mirror edgeMode, which would sample from pixels mirroring back inside the backdrop area. This solves the problem that clipping with edgeMode="duplicate" was trying to solve (we don't bleed outside contents into the backdrop), but also means that colors introduced to the edge of the backdrop aren't heavily weighted into the blur. I mocked up an example of what this would look like using -webkit-box-reflect to produce the mirror image for the blur - https://jsbin.com/gacokul/edit?html,css,output. As a result, pixels near the edge of the backdrop are weighted more heavily, but not as heavily as the edges are in edgeMode="duplicate".

Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/374 using your GitHub account

Received on Wednesday, 18 September 2019 23:04:00 UTC