Safari: drop-shadow filter remains visible even with hidden element

user_11609177 0
Viewed 3369

I'm applying drop-shadow filter to a div (dropdown) that is displayed and hidden as per user interaction, however, in Safari the drop-shadow remains visible even when the element is hidden.

The bug happens only in 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 css html
1 Answers

I think I found a possible workaround.

Try adding will-change: filter; to your .b { ... } styles. The issue seems to be fixed this way.

Here is the code snippet with the fix:

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>

user_125252380
Related