backdrop-filter blur issue

[emgeoffice]

Hi there,

I have a problem with my buttons as I have a backdrop-filter (also webkit version) using custom CSS. It shows up in Safari, but in Chrome and Arc it does not load initially. However, when I inspect the button element it says that it is enabled. When I uncheck and re-check the rule it suddenly works.

www.simonemge.com

Does anyone know what kind of problem I am running into?

Best,

Simon

[arminunruh]

hey where is the backdrop filter enabled? i dont see it on your frontpage

if its an element that changes height with javascript that can make it not work i think!

[emgeoffice]

I have it in custom CSS.

[emgeoffice]

The Button element that is not working properly is on the legal page top left.

[arminunruh]

can you try this:

https://simonemge.com/legal-notice/

here, put the row that contains the button last. after the row with the text content.

now
make the button position: fixed;
instead of the row position: fixed;

so for example you can use your "stick" class on the button (in the gridder, right click the button, choose "set html class and id")
instead of using it on the row

[emgeoffice]

I suddenly found the problem: I had to disable "revealing transition". Now it works on Chromium. Is that a bug or is that the correct behavior?

[arminunruh]

just a note, if you want to set a position of a single element to fixed, instead of setting the row to fixed, you may need to use a width: 40px;
or some other width on the fixed class. like:

.fixed-element {
    position: fixed;
    bottom: 20px;
    left: 30%;
    z-index: 1000!important;
    width: 80px;
}

I had to disable "revealing transition". Now it works on Chromium. Is that a bug or is that the correct behavior?

maybe it has something to do with that:

(source: https://stackoverflow.com/questions/73988128/why-isnt-backdrop-filter-blur-working-properly)

seems they also see the same issue caused by animation:
https://discourse.webflow.com/t/backdrop-filter-blur-not-working-for-nested-elements/244665

for some reason this seems to be just how the browser has implemented blur :O

[emgeoffice]

Thank you for your help so far! I have added "width: fit-content" and instead of the row I am now using the "stick" class on the button itself.

I also learned about the different implementation of backdrop-filter in Chromium. For the moment I am fine as it is working visually somehow on my site. I also do not plan to add many more features or content, so I think I am fine for the moment. Thanks again!

[arminunruh]

aha nice ok!

well the things i suggested to fix it were just wild guesses.
probably your fix was the main important one!