我正在将阴影过滤器应用于根据用户交互显示和隐藏的 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";
}
})Run Code Online (Sandbox Code Playgroud)
.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: …Run Code Online (Sandbox Code Playgroud)