为什么 Safari 中的 `object-position` 的`transition` 不起作用？

Question

我正在尝试为 object-fit: cover; 样式的 img 创建平滑滚动效果。经过各种不满意的尝试，当我在 Javascript 中更新后者时，使用 object-position 属性上的 CSS transition 属性效果非常好。

事实证明，在 Safari 和 Safari Mobile（特别是分别为 v14.1.2 和 v14.7.1，但可以肯定地说，截至 2021 年 9 月 26 日接近“最新”）。

我在这里创建了一个最小的工作示例（恰好在 CSS 中进行属性更新，但效果似乎相同）：

https://jsfiddle.net/v9fgxpb8/1/

其中最重要的部分是：

HTML

<div style="height: 150px; width: 150px;">
<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: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    -webkit-transition: object-position 1s;
    -moz-transition: object-position 1s;
    -o-transition: object-position 1s;
    transition: object-position 1s;
}
#example_1:hover {
    object-position: 50% 0%;
}

在 Opera 和 Chrome 中，当将鼠标悬停在图像上时，这会产生平滑的滑动效果，因为它会从位于中间的位置过渡到位于顶部的位置。

在 Safari 中会发生重新定位，但没有动画效果。事实上，正如 JSFiddle 所示，“transitioned”事件永远不会在 Safari 中触发。

我在任何地方都找不到任何关于这在 Safari 中不起作用的建议。实际上，同样列为受支持的其他 CSS 属性的行为与预期相同。这根本不起作用，还是我忽略了什么？

Answer 1

我会说这只是一个未知的 Safari 错误，您应该记录它。