CSS `Filter: blur()` 在 Safari 上无法正常工作答案

【问题标题】：CSS `Filter: blur()` not working properly on SafariCSS `Filter: blur()` 在 Safari 上无法正常工作
【发布时间】：2022-07-14 00:46:35
【问题描述】：

开始在一个项目上使用filter: blur()，但发现它在 Safari 上运行不佳。

blur 不像在其他浏览器上那样向外扩展，在 Safari 上，overflow 似乎被设置为hidden，但事实并非如此。有时它会起作用，有时会完全崩溃。我还注意到，当过滤器发生转换时，错误会变得更加“激进”。无论如何，这是与Working（在 Chrome 上）和Not Working（在 Safari 上）的比较。另外，这里有一个 codepen 与此错误的副本（虽然它只在 Safari 上可见）。

与往常一样，提前感谢您的帮助。如果您想在不使用 codepen 的情况下预览代码，这里是：

代码：

body {
  height: 100vh;
  background: #272727;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-family: Gill Sans;
}

.content-div {
  width: 30rem;
  height: 30rem;
  background: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.title {
  font-size: 1.4rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.filter {
  font-size: 1.5rem;
  height: 90%;
  width: 93%;
  background: red;
  /* FILTER TRANSITION */
  transition: filter .2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
}


/* FILTER */

.filter:hover {
  filter: blur(3.3rem);
}

<body>
  <div class="content-div">

    <span class="title">Lorem Ipsum</span>

    <div class="filter">
      HOVER OVER ME
    </div>

  </div>
</body>

OBS：由于某种原因，CSS 的降价功能不起作用，对此感到抱歉。

【问题讨论】：

标签： html css

【解决方案1】：

你可以试试这个：

body {
  height: 100vh;
  background: #272727;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-family: Gill Sans;
}
.content-div {
  width: 30rem;
  height: 30rem;
  background: white;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.title {
  font-size: 1.4rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.filter {
  font-size: 1.5rem;
  height: 90%;
  width: 93%;
  background:  red;

  /* FILTER TRANSITION */
  transition: filter .2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
}

 /* FILTER */
.filter:hover {
   -webkit-filter: blur(15px);
   -moz-filter: blur(15px);
   -ms-filter: blur(15px);
    filter: blur(15px);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <div class="content-div">
    <span class="title">Lorem Ipsum</span>
    <div class="filter">
       HOVER OVER ME
    </div>
  </div>
</body>
</html>

【讨论】：

那也没用：c。我现在有几个关于如何解决这个问题的想法。如果其中任何一个有效，我会更新帖子。

【解决方案2】：

如果有人想知道，下面是需要添加到特定类的 4 条 CSS 规则。有时，Safari 在渲染悬停状态时会出现问题（例如，结合悬停比例和边框半径），因此这可以解决大部分问题。

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

【讨论】：

【解决方案3】：

问题在于，Windows 上当前的 Safari 版本比 Mac 上的当前 Safari 版本要落后一些。

在 Windows 上，当前的 Safari 版本只有 5.1，而在 Mac 上是 6.0 和 7.0。

你的坏消息是 Safari 5.1 不支持过滤器样式。

没有办法解决这个问题；它根本不受支持，直到 Safari 在 Windows 上获得更新后才会支持。

唯一的好消息是，在 Windows 上使用 Safari 的人并不多，所以这个问题应该不会影响太多用户。

您可以在 CanIUse.com 上查看更多有关浏览器支持此功能的信息：http://caniuse.com/#search=filter

【讨论】：

【解决方案4】：

.filter:hover {
  -webkit-filter: blur(3.3rem);
}

将-webkit 放在filter: blur(...) 之前

【讨论】：

以前试过。对不起，我应该说我之前尝试过的。我找到了解决此问题的方法，但目前没有时间更新帖子。它基本上包括使用backdrop-filter: blur() 作为替代品。一有时间，我会用答案更新帖子。

【解决方案5】：

这样就好了

.filter:hover  {
-webkit-backdrop-filter: blur(15px);
}

【讨论】：

【解决方案6】：

出现此问题是因为 safari 5.1 不支持过滤器样式。如果你有 chrome，你可以使用它，但如果你没有，你必须下载或者你不能使用过滤器样式。

【讨论】：

我在 Safari 14.0.2