当调整具有动画"translate(%)"的元素时,Safari bug的解决方法

Question

寻找我在Safari(版本10.1.1)中遇到的错误的解决方法,其中使用%转换动画"转换"的元素在调整该元素的大小时无法正确更新.

下面是一个示例用例:通过使用以下方式将图像放置在textarea后面,类似于背景"cover":

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

哪个按预期工作.

但是,如果我们将transform属性设置为具有相同值(但是已设置动画):

@keyframes same_transform_as_keyframes {
  0%, 100% { transform: translateX(-50%) translateY(-50%); }
}

animation: same_transform_as_keyframes 1s linear 0s infinite normal none running;

然后在Safari 10.1.1和iOS Safari中,转换最初按预期工作,但在调整元素大小时不会正确更新偏移量.

它在Chrome中运行良好.

这是CodePen演示此问题.

在我看来,问题是Safari正在计算变换的%值,但是在调整元素大小时不会重新计算这些值.

任何有关Safari的潜在修复的想法或帮助将不胜感激.通过在没有javascript的情况下改变其他一些属性来"强迫"Safari重新计算动画的行为？

只是为了澄清,我不是在寻找一种将背景图像居中的解决方法.我正在寻找一种解决方法,允许使用动画翻译(%)值.

Answer 1

尝试使用will-change: transform;“应该”强制在该层上进行 GPU 渲染。虽然存在性能成本，但听起来 Safari 似乎没有正确重绘。

查看MDN 文档。请注意警告，这应该作为最后的手段。

也就是说，当类似的非动画版本似乎效果很好时，您使用的动画似乎成本高昂。