CODEWITHSUNDEEP
csswordpress
LANDVOGT
LANDVOGT

Reputation: 35

backdrop-filter not working on iOS / effecting positioning?

I have two weird issues with the CSS "backdrop-filter".

First, I use this snippet to create this frosted glass effect:

    webkit-backdrop-filter: blur(10px) saturate(100%) contrast(60%) brightness(130%);
    backdrop-filter: blur(10px) saturate(100%) contrast(60%) brightness(130%);

It works great on all devices but my old iPad (6 Gen / iOS 14.7.1). There it just does not show up at all. It does work on other pages though (here for example). I guess some other file has to interfere then? The website I try to achieve this is here

The second issue is really weird. I use a dark mode with a separare stylesheet. For now the only difference in this stylesheet is a "backdrop-filter" for the body:

body {
    background-image: url(https://dreschers.net/wpgo/wp-content/uploads/2021/08/Verlaeufe2.svg);
    backdrop-filter: grayscale(0.8);
}

But this filter does not apply to the whole body, only parts of it, and when I am logged into wordpress, it moves the adminbar. I just have no idea whatsoever why this happens.

with light mode

with dark mode

Thank you for helping :)

Upvotes: 2

Views: 3282

Answers (1)

sam sam
sam sam

Reputation: 64

Starting hyphen is missing your in -webkit-:

-webkit-backdrop-filter: blur(10px) saturate(100%) contrast(60%) brightness(130%);

Upvotes: 4

Related Questions