backdrop-filter: blur() safari 浏览器 无效 解决
姚自强
遇到的问题：设置 backdrop-filter，Safari 浏览器没效果，win正常
我查找到的原因： 元素初始高度为0，在设置高度动画，就会导致 backdrop-filter 在 Safari中没效果
解决方法：
第一种：高度初始100%，在父级上 做 高度动画 （可行）
第二种：初始高度 不为0，在设置 高度动画（未测试，没mac，一直劳烦同事怕被打 ๑乛◡乛๑）
下面是 Safari 无效代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,maximum-scale=1,user-scalable=no" name="viewport" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
span {
display: block;
width: 100%;
height: 100vh;
background-color: coral;
}
.div {
position: fixed;
top: 0;
left: 0;
z-index: 5;
width: 100%;
}
.div p {
width: 100%;
height: 100px;
background-color: burlywood;
}
.div div {
position: absolute;
width: 100%;
height: 0vh;
z-index: 5;
top: 0;
left: 0;
transition: all 0.6s;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(30px);
backdrop-filter: blur(30px);
}
</style>
</head>
<body>
<span></span>
<div class="div">
<p></p>
<div id="aaa"></div>
</div>
</body>
</html>
<script>
setTimeout(() => {
document.getElementById("aaa").style.height = "100vh"
}, 1000)
</script>
类似资料：