[fxtf-drafts] [filter-effects-2] User feedback: backdrop-filter is way less useful because it's tied to backdrop and not to background (#408)

ell1e has just created a new issue for https://github.com/w3c/fxtf-drafts:

== [filter-effects-2] User feedback: backdrop-filter is way less useful because it's tied to backdrop and not to background ==
Okay, so I just played around with backdrop-filter and at first it was really cool: I can have a modern milk glass effect with stuff blurred behind, and it "just works"?? How cool is that?

But then I discovered the very inconvenient weirdness of its layout effect: backdrop-filter apparently requires all child elements to be contained and therefore messes up all absolute/fixed/relative children that previously "escaped" their milk glass background parent, and contains them inside. While you might argue that this is not an issue since I can just move affected child elements out of their parent, this feels like a huge limitation for websites designed to have "clean DOM" like this:

```<!DOCTYPE HTML>
<html lang="en">
<head>...</head>
<body>
    <content>
        <img id="main-logo-small" src="/horse64logo.png" alt="Horse64 Logo"/>
        <h1>horse64, simple and versatile.</h1>
        <p><a href="/download">Try <em>Horse64</em> now</a>, a high-level language ...
```
![scr](https://user-images.githubusercontent.com/64124388/95707376-e428f480-0c48-11eb-8ef7-17dc44b961c1.png)

*(the white round corner content box with the main text inside is `<content>`, and as you can see, the `<h1>` heading is clearly placed outside of it)*

The problem here, if it isn't obvious, is that it's IMHO a very useful trick to be able to move children outside their parent in layouting to "loosen" the strict what-contains-what relationship, and therefore avoid unnecessary clutter in the DOM with tons of separate containers just for visual layouting when on a semantic level they really aren't desired to be there.

backdrop-filter breaks this, apparently to get some sort of nice contained "backdrop rectangle" with all children inside which would be ruined by letting them escape like that, so it doesn't seem to be allowed.

I don't know why exactly this decision was made, but as seen with the example above this can be extremely inconvenient. And why I don't get it as a user is, background transparency doesn't have this issue, and backdrop-filter effects similarly only seem to interact with what is *behind* the element, but *not* actually the backdrop itself much - e.g. the blur doesn't blur the element itself into its background, rather just what is *behind* it. So why does it even need to be tied to a neatly contained backdrop like that? Why can't it just let all childen be wherever, and similarly to background transparency it just applies to the clear bounds of the parent and if any children escapes then just ignore it for the effect? The way it is done seems really limiting and a bit disappointing with how it clashes with some more unusual layouts. It's just sad to need to pick between a nice semantically clean DOM, and actually having it look like I want it to.

I just wanted to give you this feedback hoping it could be changed, by e.g. moving it to a background-filter instead that is not tied to an invasive layouting change like that. Maybe that is not technically feasible, I don't know. But I sure wish it was how it was done instead.

Or is there a workaround for this that doesn't involve cluttering the DOM I'm not aware of? I really can't think of any

Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/408 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 12 October 2020 05:23:53 UTC