css - 悬停时的背景大小转换使 Safari 11.0.3 上的图像抖动

Question

我试图用 CSS 实现图像的缩放效果，它在 Chrome、Firefox、Opera、Edge 上运行流畅。但是在 Safari 11.0.3 上，悬停时背景大小的转换会使图像不自然地抖动。

代码笔: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;
}