背景过滤器在 Chrome IOS 上不起作用吗？答案

【问题标题】：Does Backdrop-Filter not work on Chrome IOS?背景过滤器在 Chrome IOS 上不起作用吗？
【发布时间】：2021-06-10 19:21:26
【问题描述】：

我目前正在开发一个需要backdrop-filter 才能使用其模糊功能的网站。一切都按预期工作：

适用于 Windows 和 MacOS 的 Chrome
适用于 iOS 和 MacOS 的 Safari

我了解并非所有浏览器都可能支持backdrop-filter，这就是我不提及 Firefox 的原因。但是，该代码似乎不适用于 iOS 版 Chrome。作为参考，对于 Chrome IOS，我运行的是版本 87.0.4280.77。

我检查了“caniuse.com”，似乎应该支持效果（https://caniuse.com/?search=backdrop-filter供参考）。

这是简短的 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>

这里是对应的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;
}

我的代码有问题吗？我的 Chrome 有问题吗？或者Chrome for IOS不支持backdrop-filter？

【问题讨论】：

尝试使用百分比而不是小数进行对比
@Rojo 哇！那解决了它！谢谢罗霍！如何将此标记为我的答案？
很高兴为您提供帮助；我已经发布了一个实际答案供您接受

标签： html css google-chrome

【解决方案1】：

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;
}

contrast 不支持小数

【讨论】：