Menu
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>
790
Using box-shadow gives us a rectangular shadow, even though the element has no background, while drop-shadow creates a shadow of the non-transparent parts of the image. This will work whether the image is inline in the HTML (either as an inline SVG, or in <img> tag), or a CSS background image.
Text shadow # The text-shadow property is very similar to the box-shadow property. It only works on text nodes. The values for text-shadow are the same as box-shadow and in the same order. The only difference is that text-shadow has no spread value and no inset keyword.
Using transforms on the box-shadow (& transform ) property, we can create the illusion of an element moving closer or further away from the user.
Shadow filter is used to create an attenuated shadow in the direction and color specified. The following parameters can be used in this filter.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
