W3C home > Mailing lists > Public > public-fxtf-archive@w3.org > November 2018

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

From: Markus Stange via GitHub <sysbot+gh@w3.org>
Date: Thu, 08 Nov 2018 00:56:45 +0000
To: public-fxtf-archive@w3.org
Message-ID: <issue_comment.created-436833939-1541638604-sysbot+gh@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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:50:24 UTC