backdrop-filter: blur() safari 浏览器无效解决

TGODS

已于 2022-09-01 10:26:55 修改

阅读量9k

点赞数 1

分类专栏：问题解决文章标签：前端 css

于 2022-04-02 17:42:57 首次发布

本文链接：https://blog.csdn.net/qq_37131375/article/details/123925646

版权

问题解决专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在Safari浏览器中backdrop-filter动画无法正常显示的问题，问题源于元素初始高度为0。解决方案包括设置元素高度为100%并在父级上进行动画操作，或者确保初始高度不为0。示例代码展示了无效的backdrop-filter应用，并提供了解决方案的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到的问题：设置 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>