Drop shadow with fade in animation is cut off on iOS-CodePudding

I have a website where I fade in a set of SVG icons which have the filter: drop-shadow rule applied. This works fine on desktop, however on iOS the shadow gets cut off once the animation finishes.

For example, this is the html:

<div >
  <svg  viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="white"/>
  </svg>
</div>

The css:

@keyframes fade-in {
  from {
    opacity: 0.0;
  }
  to {
    opacity: 1.0;
  }
}

.fade-in {
  animation: fade-in 2s;
}

.shadow {
  filter: drop-shadow(0 0.1rem 0.7rem black);
}

JS Bin:

CodePudding user response：

Safari has multiple bugs related to shadows and various animations. Luckily, looks like this one is not the worst. Adding a -webkit-transform: translateZ(0); property to your .fade-in class did the trick for me.

For more info: this post is pretty similar to yours, and it contains almost same advice.