开始从事filter: blur()一个项目，发现它在 Safari 上运行得不太好。
与blur其他浏览器上的向外扩展不同，在 Safari 上，它似乎overflow被设置为hidden，但事实并非如此。有时它可以工作，有时却完全崩溃。我还注意到，当过滤器发生转换时，该错误会变得更加“激进”。无论如何，这是与工作（在 Chrome 上）和不工作（在 Safari 上）的比较。另外，这里有一个代码笔，其中包含此错误的副本（尽管它仅在 Safari 上可见）。
一如既往，提前感谢您的帮助。如果您想预览代码而不使用代码笔，这里是：
代码：
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 的 markdown 不起作用，对此感到抱歉。
Mar*_*hak 14
如果有人想知道，下面是需要添加到特定类的 4 个 CSS 规则。有时，Safari 会出现呈现悬停状态的问题（例如，结合悬停比例和边框半径），因此这可以解决大部分问题。
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
小智 10
在我看来，评分最高的答案并不是最好的。那里声明的属性太多。只需这样就足够了：
transform: translate3d(0, 0, 0);来源： https: //graffino.com/til/raw/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari
我刚刚遇到了类似的问题，但没有一个解决方案适用于 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>小智 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>