Does Backdrop-Filter not work on Chrome IOS?

user_9351367 0
Viewed 4382

I'm currently working on a website that requires backdrop-filter to use its blur feature. Everything works as intended on:

  • Chrome for Windows and MacOS
  • Safari for iOS and MacOS

I understand that not all browsers may support backdrop-filter which is why I don't mention Firefox. However, the code doesn't seem to work on Chrome for IOS. For reference, for Chrome IOS, I am running Version 87.0.4280.77.

I've checked "caniuse.com" and it seems like the effect should be supported (https://caniuse.com/?search=backdrop-filter for reference).

Here is the brief HTML:

<div class="blur">
    <h1>My Resume</h1>
      </div>
          <div class="blur">
    <h2>“Innovation distinguishes between a leader and a follower” ― Steve Jobs</h2>
      </div>

and here is the corresponding CSS:

.blur::before{
    backdrop-filter: blur(2px) contrast(0.6);
    -webkit-backdrop-filter: blur(2px) contrast(0.6);
    width: contain;
    border-radius: 4px;
    padding: 0.3rem;
    
}
.blur {
    backdrop-filter: blur(2px) contrast(0.6);
    -webkit-backdrop-filter: blur(2px) contrast(0.6);
    width: contain;
    border-radius: 4px;
    padding: 0.3rem;
}

Is there something wrong with my code? Is there an issue with my Chrome? Or does Chrome for IOS not support backdrop-filter ?

google-chrome css html
1 Answers

Use percentages instead of decimals for constrast

.blur::before{
    backdrop-filter: blur(2px) contrast(60%);
    -webkit-backdrop-filter: blur(2px) contrast(60%);
    width: contain;
    border-radius: 4px;
    padding: 0.3rem;
    
}
.blur {
    backdrop-filter: blur(2px) contrast(60%);
    -webkit-backdrop-filter: blur(2px) contrast(60%);
    width: contain;
    border-radius: 4px;
    padding: 0.3rem;
}

Decimals are not supported for contrast

user_102108410
Related