悬停时的背景大小转换会使safari 11.0.3上的图像抖动

Question

我试图用CSS实现图像的zoomIn效果，它在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

尝试添加此-webkit-并查看其是否有效

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

Answer 2

尝试将此属性添加到您的班级

backface-visibility: hidden;