- From: Mason Freed via GitHub <sysbot+gh@w3.org>
- Date: Fri, 12 Oct 2018 20:05:56 +0000
- To: public-fxtf-archive@w3.org
Another issue with defining `backdrop-filter` to read back everything (not respecting isolation) is that there are some situations where the behavior is ambiguous or at least not easily anticipated. For example, if an element (call it “A”) has 0.5 opacity (creating a stacking context), and a child of that element (call it “B”) has a backdrop-filter applied, the 0.5 opacity will potentially be “applied twice” if the isolation is not respected. First, during the read back of “everything before” the backdrop-filter on B, the 0.5 opacity will be applied to A to blend it with its backdrop (call that “R” for root). The resulting backdrop-filtered image will then be used as the starting canvas for element B. Once B is painted, this entire stacking context (containing A, the backdrop-filtered image, and B) will be composited into R using the 0.5 opacity for the group. So the portion of A under B will effectively have opacity 0.25. Please see [this example](https://jsbin.com/gihilun/edit?html,output) for this effect possibly happening, in Box 3. I’ve included screenshots from Chrome, Safari, and Edge below. In Chrome, all three boxes seem to have the right amount of blur and opacity applied. (Don’t worry, there are plenty of other bugs in Chrome’s backdrop-filter, just not here.) In Safari, Box 3 looks like it is at 0.25 opacity - double-counted. And incidentally, Box 1 also shows another bug (I believe) in Safari. It has a background color, which seems to turn off the backdrop-filter entirely. On Edge, I’m not sure what is happening. The edges of the red box are crisp all the way around, so perhaps the red background is being repainted on top of the blur? Or maybe some form of opacity double-counting here too? Just to make the point again - having backdrop-filter respect isolation should lead to fewer bugs, and a less confusing experience for developers. Chrome 69: <img width="581" alt="chrome_screenshot" src="https://user-images.githubusercontent.com/29559695/46891309-4c585c00-ce1e-11e8-91b2-9016fd2fd4fa.png"> Safari 12:  Edge 42:  -- GitHub Notification of comment by mfreed7 Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/53#issuecomment-429447287 using your GitHub account
Received on Friday, 12 October 2018 20:05:58 UTC