Я пытаюсь использовать CSS-переход для фильтра и получаю странные результаты в Safari, но в Chrome работает, как и ожидалось.Мой CSS, где я установил начальный фильтр и переход (рабочая ссылка codepen ниже):
transform: translate3d(-50%,-50%,0) scale(1);
filter: blur(0px) contrast(1.1) sepia(0) saturate(1);
transition: transform 1s ease-in-out 1s, filter 1s ease-in-out 1s;
Safari применяет фильтр, как только класс с различными атрибутами фильтра добавляется, но затем послезадержка перехода, возврат к исходному состоянию и анимация перехода с добавлением фильтра.
Я воссоздал проблему в codpen здесь .Он отлично работает в Chrome, но в Safari имеет странное состояние.Я пытался добавить префиксы -webkit- к различным элементам CSS и их атрибутам, но, возможно, я что-то упустил.
Любая помощь очень ценится.