CSS过滤器：blur()'在Safari上无法正常工作

iyfamqjs 于 2023-03-14 发布在其他

关注(0)|答案(8)|浏览(450)

开始在一个项目中使用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的降价功能不起作用，很抱歉。

css

来源：https://stackoverflow.com/questions/70138527/css-filter-blur-not-working-properly-on-safari

8条答案

按热度按时间

0yg35tkg1#

如果有人想知道，下面是4个CSS规则，需要添加到特定的类。有时，Safari浏览器有问题呈现悬停状态（例如，结合悬停比例和边界半径），所以这修复了大多数这些问题。

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

赞(0）回复(0）举报 2023-03-14

htzpubme2#

你可以试试这个：

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>

赞(0）回复(0）举报 2023-03-14

qq24tv8q3#

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

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

赞(0）回复(0）举报 2023-03-14

b4lqfgs44#

评分最高的答案在我看来并不是最好的，在那里申报的房产太多了，仅仅这一点就足够了：

transform: translate3d(0, 0, 0);

来源：https://graffino.com/til/raw/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari

赞(0）回复(0）举报 2023-03-14

iugsix8n5#

问题是目前Windows上的Safari版本比Mac上的Safari版本落后了一些。
在Windows上，目前的Safari版本只有5. 1，而在Mac上则是6. 0和7. 0。
坏消息是Safari 5.1不支持过滤器样式。
这是没有办法的;它根本不受支持，直到Safari在Windows上得到更新才会得到支持。
唯一的好消息是，在Windows上使用Safari的人并不多，所以这个问题应该不会影响太多用户。
您可以在www.example.com上查看有关此功能的浏览器支持的详细信息：CanIUse.comhttp://caniuse.com/#search=filter

赞(0）回复(0）举报 2023-03-14

7xzttuei6#

这样就行了

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

赞(0）回复(0）举报 2023-03-14

ctzwtxfj7#

我也遇到过类似的问题，但没有一个解决方案能在Safari 16.1上运行，
对我来说，解决办法是在模糊的元素中添加一个will-change: transform。
希望这能帮到什么人。
工作片段：

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;
  will-change: transform;
}

/* 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>

赞(0）回复(0）举报 2023-03-14

6pp0gazn8#

这个问题发生是因为safari 5.1不支持过滤器样式.如果你有chrome你可以使用它，但如果你没有你必须下载或你不能使用过滤器样式。

赞(0）回复(0）举报 2023-03-14