CSS анимация со вставкой box-shadow вызывает мерцание в Safari

Question

У меня есть супер-простая CSS анимация, в которой вставка box-shadow сжимается / расширяется. Он выглядит супергладким в Chrome, немного запинается в Firefox и много мерцает в Safari. И я понятия не имею, почему.

Chrome

Safari

У меня есть Погуглил весь день и вещи, которые я пробовал:

-webkit-backface-visibility: скрыто;

-webkit-transform: translate3d (0,0,0);

-webkit-transform-style: preserve-3d;

-webkit-перспектива: 1000;

-webkit-transform: translateZ (0);

Ссылка на кодовое поле, показывающее проблему: https://codepen.io/ofriberg/pen/aaa0e50aa5c2bf2bed7fe9004b5c6c10

или просто код

HTML

<div class="container"></div>

CSS

* {
    box-sizing: border-box;
}
body {
    -webkit-font-smoothing: antialiased;
}
* {
    box-sizing: border-box;
}
.container {
    width: 10rem;
    height: 10rem;
    background: #ddd;
    position: relative;
}
.container:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    border-radius: 50%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: beforeAnim;
    transition: all 0.6s ease-in-out;
    background: green;
    box-shadow: inset 0 0 0 30px rgb(255,255,255);
} 

@-webkit-keyframes beforeAnim {
 0% { 
        box-shadow: inset 0 0 0 30px rgb(255,255,255);
    }
    50% {
        box-shadow: inset 0 0 0 0px rgb(255,255,255);
    }
    100% {
        box-shadow: inset 0 0 0 30px rgb(255,255,255);
    } 
}

Очень признателен за любую помощь!