CSS keyframes animation is not smooth on Safari but works on Chrome

Question

I am trying to add a smooth pulsating border to a button and it works fine on Chrome but the animation is not smooth but you can see the discrete steps of the animation. From other StackOverflow questions it looks like this might be a performance issue and needs to be solved differently. Just trying to make sure I am not overlooking anything with the current approach.

It basically looks like this:

 .pulse { border-radius: 7.5px; animation: border-pulsate 2s infinite; } @keyframes border-pulsate { 0% { box-shadow: 0 0 0 1px blue; } 50% { box-shadow: 0 0 0 3px blue; } 100% { box-shadow: 0 0 0 1px blue; } }

 <div> <span class="pulse">Pulse</span> </div>

Answer 1

I had the same issue with Safari but regarding an image animation.

Surfing on forums led me to optimize my code. Seems that Safari has some problem animating something which has a shadow and it's "dynamic".

I found the solution by uploading the border as an image, compressing it online and then uploading it.

Got a result in which Safari was even smoother than Chrome and Firefox.

Answer 2

Thanks to the hint by @RickardElimää I got this to work by using a pseudo-element and animating its opacity:

 .pulse { position: relative; display: inline-block; border-radius: 7.5px; box-shadow: 0 0 0 0px blue; } .pulse::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; opacity: 0; border-radius: 7.5px; box-shadow: 0 0 0 3px blue; animation: border-pulsate 2s infinite; } @keyframes border-pulsate { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

 <div> <span class="pulse">Pulse</span> </div>