当调整具有动画“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 docs。 请注意警告，该警告应被用作最后的手段。

也就是说，当类似的非动画版本看起来效果很好时，您正在使用的动画似乎代价很高。