Почему некорректно работает transition в браузере Safari?

Question

[Александр Соловей]

Ест вот такой пример transition https://safaritransition.naghtigall.repl.co
Работает во всех браузерах, кроме Safari - в нем сначала картинка теряет border-radius, но после окончания перехода border-radius возвращается. Чтобы увидеть в чем вопрос - нужен браузер Safari.

Comments

[lpite]

В Firefox на iPhone так же

[Александр Соловей]

Нашел обсуждение от 2018 года вот здесь: https://forum.webflow.com/t/overflow-hidden-round-...

Answer 1

[Евгений]

Да, это косяк браузера. Попробуйте обернуть блок my_block в ещё один блок с overflow: hidden; и радиусом

Comments

[Александр Соловей]

Самый первый my_block обернул my_rounded, но проблему не решило...

Answer 2

[Александр Соловей]

Нашел ответ на https://forum.webflow.com/t/safari-not-hiding-over...

Для Сафарика нужно так:

-webkit-mask-image: -webkit-radial-gradient(white, black);