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

v6ylcynt  于 2023-04-27  发布在  Go
关注(0)|答案(1)|浏览(171)

我目前在一个网站上工作,需要backdrop-filter使用其模糊功能。一切都按预期工作:

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

我知道不是所有的浏览器都支持backdrop-filter,这就是为什么我没有提到Firefox。然而,代码似乎在Chrome for IOS上不起作用。作为参考,对于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

zsohkypk

zsohkypk1#

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不支持小数

相关问题