Re: [fxtf-drafts] [filter-effects-2] Backdrop filters should not use BackgroundImage (#53)

In trying to demonstrate what we see as a fundamental problem with allowing backdrop-filter to filter **everything** that comes before it, we created [this example page](https://jsbin.com/firinoy/edit?html,output). This page did not behave as we (or anyone?) would have expected, when loaded within Safari, which filters everything behind the element. I have included screenshots from Chrome and Safari below.

This example contains a parent element (the big one containing the text) that has an invert filter applied, so it shows up as black background with white text. The "dialog" element is a child of that inverted element, so it should **inherit** the invert filter. So our expectation was that the already-inverted backdrop of the dialog would be used as the starting background for the dialog element, then the remainder of the dialog would be rendered (e.g. the blue border) and then the entire thing would be inverted again, because of the inherited filter. That should result in the text within the dialog going back to white background with black text, and a yellow, inverted border. What happened instead is some strange mix of the two. Only one invert was applied, as the text inside the box is still white on black background (inverted only once). The borders did get inverted, because they're yellow. And even more confusing, the background outside the text region is also inverted to black background and white text. So the right half of this dialog is inverting the background, and the left half is not. And this is all interesting, because naively, we expected almost exactly the opposite. It is this confusion that we are concerned about, in general. It will lead to differences in implementation, and general confusion among developers. Keep in mind - the point here isn’t that there is a bug in this particular implementation. The point is that it is very difficult to define what “correct” means, when filtering passes beyond an element with effects applied.

Chrome 72:
<img width="593" alt="chrome 1" src="https://user-images.githubusercontent.com/29559695/50715714-5c559580-1033-11e9-8092-d4fd219f849c.png">

Safari 12:
<img width="586" alt="safari 1" src="https://user-images.githubusercontent.com/29559695/50715718-624b7680-1033-11e9-84e3-af51dbc6f365.png">

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

Received on Friday, 4 January 2019 23:26:35 UTC