CODEWITHSUNDEEP
cssfiltersafaricss-transitionsdropshadow
wittich
wittich

Reputation: 2311

Failing filter Drop Shadow on transition using Safari

I toppled over an issue of the Safari browser (~ v16.4) when using a drop-shadow filter with includes a transition.

It supposed to be supported since a few years now: https://caniuse.com/?search=drop-shadow.

Nevertheless, here an example which works well with Chrome and Firefox, but it fails on Safari:

enter image description here

function test() {
    $('.round-shadow').each(function(index) {
        $(this).toggleClass('hover');
    });
    setTimeout(test,600);
}
test();
.round-shadow {
  display: block;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  background: #efefef;
  border-radius: 50%;
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.75));
}

.round-shadow > div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.round-shadow img {
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.57, 0.21, 0.69, 1);
}

.round-shadow.hover img,
.round-shadow:hover img {
  transform: scale(1.05, 1.05);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round-shadow">
  <div>
    <img src="https://picsum.photos/240/240">
  </div>
</div>

Can somebody explain why Safari is failing on that render, and what is the best way to fix it?

One fix seems to be to use box-shadow as it correctly recognize the border-radius:

.round-shadow {
  /*filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.75));*/ 
  box-shadow: 4px 4px 8px rgba(0, 0, 0, .75);
}

Upvotes: 1

Views: 240

Answers (1)

Fofandi
Fofandi

Reputation: 43

Faced the same issue,

Was using drop-shadow-lg & hover:drop-shadow-2xl with tailwind but it lead to weird behaviour with rounded corners and the css transition of the drop shadow.

For tailwind users using shadow-lg & hover:shadow-2xl seems to fix it.

Similar to @wittich's solution, where drop-shadow in tailwind uses the css property drop-shadow & shadow in tailwind uses box-shadow in css.

Very weird...

Upvotes: 1

Related Questions