Safari：即使隐藏元素，阴影过滤器仍然可见答案

【问题标题】：Safari: drop-shadow filter remains visible even with hidden elementSafari：即使隐藏元素，阴影过滤器仍然可见
【发布时间】：2019-12-12 22:04:44
【问题描述】：

我将阴影过滤器应用于根据用户交互显示和隐藏的 div（下拉菜单），但是，在 Safari 中，即使元素被隐藏，阴影仍然可见。

该错误仅发生在 Safari 中。

document.querySelector('.bt').addEventListener('click', function () {
    let b = document.querySelector('.b');

    if (b.style.display === "none") {
        b.style.display = "block";
    } else {
        b.style.display = "none";
    }
})

.bt {
    padding: 10px;
    margin-bottom: 40px;
}

.a {
    height: 100px;
    padding: 20px;
    background: #ccc;
}

.b {
    position: relative;
    width: 50px;
    height: 50px;
    background: #0f0;
    filter: drop-shadow(0 0 0.125rem #000);
}

.b::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-right: .5rem solid transparent;
    border-left: .5rem solid transparent;
    border-bottom: .5rem solid #0f0;
    top: -.5rem;
    left: .5rem;
}

<h1>drop-shadow filter bug with Safari</h1>

<button class="bt">CLICK ME!</button>

<div class="a">
    <div class="b">
        .b
    </div>
</div>

【问题讨论】：

Safari 太糟糕了。在这个答案中尝试修复：stackoverflow.com/a/35912155/1498053（抱歉，现在不在 Mac 上，所以我无法测试它）
我刚刚在 mac/safari 上测试过，可以确认这个错误。当您切换应用程序并返回 Safari 时，过滤器会被删除但不会再次重新应用。
解决方法？ box-shadow: 0 0 0.125rem #000。我没有 Apple/Safari，但它可以解决问题。
感谢大家的快速回复。 @elveti，我不明白 -webkit-mask-image 如何解决我的问题
@steven-kuipers，不幸的是这个错误存在:(

标签： html css safari

【解决方案1】：

我想我找到了一种可能的解决方法。

尝试将will-change: filter; 添加到您的.b { ... } 样式中。问题似乎是这样解决的。

这是带有修复的代码 sn-p：

document.querySelector('.bt').addEventListener('click', function () {
    let b = document.querySelector('.b');

    if (b.style.display === "none") {
        b.style.display = "block";
    } else {
        b.style.display = "none";
    }
})

.bt {
    padding: 10px;
    margin-bottom: 40px;
}

.a {
    height: 100px;
    padding: 20px;
    background: #ccc;
}

.b {
    will-change: filter;
    position: relative;
    width: 50px;
    height: 50px;
    background: #0f0;
    filter: drop-shadow(0 0 0.125rem #000);
}

.b::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-right: .5rem solid transparent;
    border-left: .5rem solid transparent;
    border-bottom: .5rem solid #0f0;
    top: -.5rem;
    left: .5rem;
}

<h1>drop-shadow filter bug with Safari</h1>

<button class="bt">CLICK ME!</button>

<div class="a">
    <div class="b">
        .b
    </div>
</div>

【讨论】：

我遇到了一个问题，我在页面上移动的元素上使用 CSS 过滤器阴影 - 它在 iOS 和桌面 Safari 上的页面上的任何位置都会留下污点。这个will-change: filter; 修复了它！谢谢
这对我也有用！我在绝对定位的下拉菜单上使用drop-shadow 过滤器。即使在菜单消失后阴影仍然存在。 will-change: filter; 是我需要的修复程序。