[filter-effects-2] Backdrop filter clipping with edgeMode="duplicate" creates discontinuity when moving.

[flackr]

Section 3: Backdrop Root step 4 clips the backdrop output to the backdrop's quad, and Section 2.1: Filtering and Clipping 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. 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. A more extreme example of the degenerate behavior with duplicate is with a striped background: https://jsbin.com/fumeloh/edit?html,css,output (Warning: It flickers a lot).

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

[mstange]

Using the mirror edge mode is an interesting idea! This problem was brought up in #342 (comment) and Mason wrote

It also has the added benefit of being more performant and being closer to Webkit. I'm not sure how their implementation (which does appear to clip the input to the border box, or something close) works better in this regard - let me know if you know!

It would still be good to find out how Safari / CoreAnimation gets around this problem.

[mfreed7]

Thanks for opening this issue, @flackr. I agree that this looks like it would provide a better visual appearance than the current edgemode=duplicate behavior.

@mstange - see my comment here on the crbug - I do believe edgemode=duplicate, or something very similar, is what WebKit is currently doing. Looking at @flackr's demo, and comparing to Safari's backdrop-filter appearance, they look very similar.

One issue is that the edgemode definition comes from Filter Effects Level 1's definition of feConvolveMatrix, and does not currently include a definition for edgemode=reflect. We would have to add reflect as a new value, and then be careful to specify where it is valid. Perhaps we wouldn't want to expand the capabilities of feConvolveMatrix to include reflect?

[yisibl]

cc @dholbert @cbrewster Firefox has the same problem.

[dholbert]

(I'll defer to @mstange for deciding what makes sense here RE the Firefox implementation.)

[mstange]

I've asked @grorg to take a look at what Safari is doing and to comment here.

As for the question about adding edgemode=reflect more generally, I don't have any objections but it should probably be explored in a separate github issue.

[SebastianZ]

It looks like the Firefox implementation is almost ready to ship and this is one of the only blockers left.

In the last comment it was mentioned that @grorg would comment here on what Safari is doing, which didn't happen yet. So maybe @smfr can answer this question.

Sebastian

[flackr]

It would be good to standardize on this reflect behavior (or some other behavior which addresses the discontinuity issues with duplicate). There are many developers who have expressed their desire for this as well on the chromium bug and it looks like we have a path to implementing reflect on chromium.

@mstange I filed #527 to discuss the particulars of edgemode=reflect

[flackr]

Here's a more extreme example of the degenerate behavior with duplicate:
https://jsbin.com/fumeloh/edit?html,css,output

Warning: It flickers.

[css-meeting-bot]

The CSS Working Group just discussed [filter-effects-2] Backdrop filter clipping with edgeMode="duplicate" creates discontinuity when moving., and agreed to the following:

• RESOLVED: change backdrop-filter's edgeMode to mirror, pending any objections

The full IRC log of that discussion

<TabAtkins> flackr: So edgeMode=duplicate we specced creates a flickering discontinuity
<TabAtkins> flackr: I propose we change the edgeMode for backdrop-filter to be reflect
<TabAtkins> flackr: Which smoothly introduces new colors as they enter the edge. It's *probably* what Safari is doing but I"m not sure, they haven't commented.
<TabAtkins> flackr: I wanted this resolved before Interop 24 tries to standardize this beahvior
<TabAtkins> TabAtkins: I haven't looked at the details but I hate flickering, and trust flackr to have the right option for making it look good
<TabAtkins> fantasai: I think think we have someone working on backdrop-filter issues and they're out right now. I have confidence in flackr but I"d like to get their opinion on the issue.
<TabAtkins> Rossen_: So postpone to next week?
<TabAtkins> TabAtkins: Alternative is resolve pending objections
<TabAtkins> fantasai: I don't udnerstand enough to know if there might be objections
<TabAtkins> fantasai: But i'm okay to resolve if it's clear that we might reopen
<TabAtkins> RESOLVED: change backdrop-filter's edgeMode to mirror, pending any objections