Неверный фильтр Drop Shadow при переходе с использованием Safari ⇐ CSS

[Гость]

Я столкнулся с проблемой браузера Safari (~ v16.4) при использовании фильтра тени с включенным переходом.
Он должен поддерживаться уже несколько лет: https://caniuse.com/?search=drop-shadow.
Тем не менее, вот пример, который хорошо работает с Chrome и Firefox, но не работает в Safari. :

Код: Выделить всё

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);
}

Код: Выделить всё

[img]https://picsum.photos/240/240[/img]

Может кто-нибудь объяснить, почему Safari не удается выполнить этот рендеринг и в чем заключается лучший способ это исправить?

Похоже, что одним из способов исправления является использование box-shadow, поскольку оно правильно распознает радиус границы:

Код: Выделить всё

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

Источник: https://stackoverflow.com/questions/764 ... ing-safari