- From: Markus Stange via GitHub <sysbot+gh@w3.org>
- Date: Thu, 08 Nov 2018 00:56:45 +0000
- To: public-fxtf-archive@w3.org
I took a closer look at [the example](https://jsbin.com/gihilun/edit?html,output) from https://github.com/w3c/fxtf-drafts/issues/53#issuecomment-429447287 and found a potential problem with making `backdrop-filter` respect isolation. [Here's a variation of the example](https://jsbin.com/cexoheduwi/edit?html,output) with the following changes: The opacity on the ancestor element `.colorbox` was removed, and the opacity on `.box1` and `.box3` was reduced to `0.1`. This variation of the example no longer demonstrates what happens when an ancestor item is isolated, but it demonstrates what happens when opacity and backdrop-filter are applied to the same element. Here's how Chrome and Safari render it: Chrome 72 Canary: <img width="658" alt="screen shot 2018-11-07 at 7 41 28 pm" src="https://user-images.githubusercontent.com/961291/48170387-59555780-e2c5-11e8-9dc9-eb627d761d73.png"> Safari 12: ![screen shot 2018-11-07 at 7 41 31 pm](https://user-images.githubusercontent.com/961291/48170393-5ce8de80-e2c5-11e8-8654-c8031571b4b7.png) In Chrome, it seems that the opacity on the element does not reduce the opacity of what's rendered by backdrop-filter on that element; the blur in the example fully blocks out the non-blurred element underneath. In Safari, the blurred backdrop is only rendered at 0.1 opacity. I think Safari's behavior makes more sense here. However, if we want to adopt Safari's behavior for this case, in terms of the compositing effect graph, I think this requires rendering the backdrop filter *inside* the opacity, if opacity and backdrop-filter are applied to the same element. But if the backdrop filter rendering goes inside of the opacity, then we have the same problem as in this issue: Opacity is an isolation boundary, so backdrop-filter on such an element would not have any effect. @mfreed7, any ideas for how we should solve this case? -- GitHub Notification of comment by mstange Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/53#issuecomment-436833939 using your GitHub account
Received on Thursday, 8 November 2018 00:56:47 UTC