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

Question

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

\n

\n
• 适用于 Windows 和 MacOS 的 Chrome
\n
• 适用于 iOS 和 MacOS 的 Safari
\n

\n

据我所知，并非所有浏览器都支持backdrop-filter，这就是为什么我没有提及 Firefox。\n但是，该代码似乎不适用于 iOS 版 Chrome。作为参考，对于 Chrome IOS，我运行的是版本 87.0.4280.77。

\n

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

\n

下面是简短的 HTML：

\n

<div class="blur">\n    <h1>My Resume</h1>\n      </div>\n          <div class="blur">\n    <h2>\xe2\x80\x9cInnovation distinguishes between a leader and a follower\xe2\x80\x9d \xe2\x80\x95 Steve Jobs</h2>\n      </div>\n

\n

这是相应的 CSS：

\n

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

\n

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

\n

Answer 1

使用百分比代替小数contrast

.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