为什么Safari中CSS transition对object-position属性不生效？

• 你遇到的是Safari旧版本的已知功能缺失bug：2021年发布的Safari 14.x版本虽然官方文档标注支持object-position属性，但并未实现该属性的CSS过渡（transition）能力，因此不会触发过渡动画，也不会抛出transitionend事件，和你的代码配置无关。该问题在Safari 15.4及之后的版本已经被官方修复，不需要兼容旧版本Safari时你的原代码可以正常运行。

如果需要兼容Safari 14.x及更早版本，可以使用兼容性更好的transform属性实现完全一致的效果：外层容器新增overflow: hidden做内容裁剪，通过位移图片本身替代调整object-position即可。

调整后核心代码 #

HTML #

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

CSS #

#example_1 {
  min-width: 300px;
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 1s;
}
#example_1:hover {
  /* 位移数值可根据你需要的展示位置调整，此处等效原object-position: 50% 0%的效果 */
  transform: translateY(-25%);
}

该方案兼容包括Safari 14.x在内的所有主流浏览器，动画性能和表现和原方案完全一致。

内容的提问来源于stack exchange，提问作者Heath Raftery