Почему "переход" не работает для "положения объекта" в Safari?

#css #safari

Вопрос:

Я пытаюсь создать эффект плавной прокрутки для img, стилизованного под object-fit: cover; . После различных неудовлетворительных попыток это работает очень хорошо, используя свойство CSS transition в object-position свойстве, когда я обновляю последнее в Javascript.

За исключением, оказывается, Safari и Safari Mobile (в частности, версии 14.1.2 и 14.7.1 соответственно, но можно с уверенностью сказать, что они близки к «последним» по состоянию на 2021-09-26).

Я создал здесь минимальный рабочий пример (который, как оказалось, обновляет свойства в CSS, но эффект кажется тем же самым).:

https://jsfiddle.net/v9fgxpb8/1/

наиболее важными частями которых являются:

HTML

 <div style="height: 150px; width: 150px;">
<img id="example_1" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_São_Paulo_Zoo.jpg"/>
</div>

CSS

 #example_1 {
    min-width: 300px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    -webkit-transition: object-position 1s;
    -moz-transition: object-position 1s;
    -o-transition: object-position 1s;
    transition: object-position 1s;
}
#example_1:hover {
    object-position: 50% 0%;
}

В Opera и Chrome это приводит к плавному эффекту скольжения при наведении курсора на изображение, поскольку оно переходит из положения посередине в положение вверху.

В Safari происходит изменение положения, но без анимационного эффекта. Действительно, как показывает JSFiddle, событие «переход» никогда не запускается в Safari.

Нигде я не могу найти никаких предположений о том, что это не должно работать в Safari. Действительно, другие свойства CSS, которые в равной степени перечислены как поддерживаемые, ведут себя так, как и ожидалось. Это просто не работает, или я что-то упускаю из виду?

Ответ №1:

Я бы сказал, что это просто неизвестная ошибка Safari, и вам следует ее зарегистрировать.