search

w3c / fxtf-drafts

Mirror of https://hg.fxtf.org/drafts
https://drafts.fxtf.org/
Other
68 stars 49 forks source link

[filter-effects-2] backdrop-filter and visibility #455

Open emilio opened 2 years ago

emilio commented 2 years ago

https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty doesn't say what happens when visibility: hidden is applied to the backdrop root. As a result, browsers diverge.

Test-case could be: https://bug1765862.bmoattachments.org/attachment.cgi?id=9275099

Following the spec to the letter I think would mean that we should render the backdrop unconditionally, even if that subtree is visibility: hidden. That's not web compatible (see relevant Gecko bug).

When everything in the subtree is invisible it seems clear that no backdrop should be rendered.

When the backdrop root is visible it is clear that it should be rendered.

But what if there's visibility: visible contents inside the backdrop root? Safari seems to render the whole backdrop. Blink only filters the contents of the visibility: visible descendant.

I think it's more reasonable (and also probably simpler to spec and implement, since toggling visibility dynamically seems to have funny effects on both Safari and Chrome) to see backdrop-filter as a "background" effect, and thus get its visibility only determined by the visibility of the backdrop root (just like background-color or background-image).

I'm fairly confident this should be web compatible, specially given both current implementations disagree, what do you think?

cc @chrishtr @smfr @glennw

mstange commented 2 years ago

What do we do for filter: url(#svgFilterWithFeFlood); visibility: hidden;?

emilio commented 2 years ago

https://bugzil.la/1765862 is the issue where we found this.

css-meeting-bot commented 2 years ago

The CSS Working Group just discussed [filter-effects-2] backdrop-filter and visibility.

The full IRC log of that discussion <emeyer> Topic: [filter-effects-2] backdrop-filter and visibility
<emeyer> Github: https://github.com/w3c/fxtf-drafts/issues/455
<emeyer> emilio: Browsers are weird and inconsistent about backdrop-filter, which we hit when starting our own implementation.
<emeyer> …We haven’t found content with visibility: visible in the backdrop in the wild, but we should be clear about what should happen.
<emeyer> smfr: My mental model is that you generated a bimap the size of the element with the filter and render the content. So you end with a texture with transparent around the edge and then use that to composite with the backdrop.
<emeyer> …So to my thinking, the Safari behavior looks correct, minus the toggle bug.
<emeyer> emilio: Doesn’t that mean you should render the whole thing even when the backdrop filter is hidden?
<emeyer> smfr: That is a bit weird, I guess.
<emeyer> smfr: I think we’d be willing to change to what you suggest.
<emeyer> emilio: I think determining the visibility by the element the filter is on is simpler, rather than rendering the whole thing.
<emeyer> …Are there other filters that depend on the background behind the element? For most stuff you end up filtering transparent.
<emeyer> smfr: mix-blend-mode is the only one I can think of.
<emeyer> …I think the way forward is to test with the filter property and maybe propose that visibility hidden will always hide the whole backdrop.
<emeyer> dbaron: For what it’s worth, I think of visibility: hidden as a paint-time effect. It should be mostly independent of this compositing things.
<emeyer> …It’s sort of inherited and controls whether things are painted or not.
<emeyer> emilio: That’s what Gecko did, but breaks sites that are set to have backdrops hidden.
<emeyer> …I’ll add some links to examples.
<emeyer> smfr: To dbaron’s point, it’s like saying it’s basically opacity: 0 but affects hit testing.
<emilio> https://bugzil.la/1765862 is the Gecko bug ftr
<emeyer> astearns: Sounds like we need more information and will need to do testing around filter as well as backdrop-filter. Take back to the issue?
<dbaron> I was saying I think it's like a middle ground between color:transparent and opacity:0
<dbaron> (I might have been muted when I said it)
flackr commented 2 years ago

filter seems to be applied from visibility: hidden elements in all browsers on this test page I put together: https://jsbin.com/jegijet/edit?html,css,output

That said, I agree with the sentiment that as a developer I feel like visibility: hidden should prevent backdrop-filter and other visual effects from that element which was hidden from being applied.