Как исправить неадекватное поведение transition в safari?

Question

[Максим Алёшин]

mg901.hol.es/flagman
В Safari на Mac, при наведении на картинки, они увеличиваются, всё работает адекватно, но стоит добавить transiton и при наведении они сначала сжимаются (появляется небольшой отступ ), а после принимают нужный размер.

Есть такой же пример, но с супер кривой вёрсткой flagman.anmedio.ru тут такой проблемы нет.

Подскажите пожалуйста, как можно убрать это баг.

Вот пример на condepen codepen.io/mgreen097/pen/ZQaOWa?editors=110

Comments

[gassmonkey]

По кофейной гуще погадать?

[Максим Алёшин]

gassmonkey: отредактировал вопрос

Answer 1

[Максим Алёшин]

Всем спасибо, кто участвовал и пытался решить этот вопрос.)

Я решил отказаться от transition: scale(); тк то же самое можно сделать просто задав большее зачение ширины и высоты. Так же я задал элементу, который содержит изображение, абсолютное позиционирование и отцентровал чтобы он увеличивался из центра. тут можно посмотреть решение codepen.io/mgreen097/pen/NxwdRR?editors=110

Answer 2

[trushka]

В фф на винде тоже заметно чючють. Думаю, не помешает задать для картинок will-change: transform. Хотя, ФФ иногда при большом количестве элементов может всякие артефакты выдавать, ещё какой-нибуть фиктивный фильтр задать, типа filter: brightness(1), особенно, вебкитам это помогает вроде
Но смотрю, в данном случае не очень помогает, всё равно картинка "шатается" при трансформации.. В общем, думаю, надо чтоб она изначально на пару пикселов перекрывала рамки контейнера..

Comments

[Максим Алёшин]

Всё равно шатается всё, да. Не лечится вообще ни как.