Переход фонового размера при наведении заставляет дрожать изображение в Safari 11.0.3

Question

Я пытался добиться эффекта zoomIn изображения с помощью CSS, он плавно работает на Chrome, Firefox, Opera, Edge.Но в Safari 11.0.3 при изменении размера фона при наведении изображения изображение будет неестественно дрожать.

codepen: https://codepen.io/Yumichen/pen/ERyWBV

CSS:

.img-zoomIn{
    background-position: 50% 50%;
    background-size: 100% 100%;
    transition: .3s ease-in-out;
    transition-delay: 0.3s;
}

.img-zoomIn:hover{
    background-size: 130% 130%;
}

Любая помощь или предложения приветствуются.Большое спасибо.

Answer 1

Попробуйте добавить это свойство в свой класс

backface-visibility: hidden;

Answer 2

Попробуйте добавить это -webkit- и посмотрите, работает ли оно

.img-zoomIn{
   -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}