调整带有动画“translate(%)”的元素大小时 Safari 错误的解决方法

Posted 2023-03-06

【中文标题】调整带有动画“translate(%)”的元素大小时 Safari 错误的解决方法

【英文标题】：Workaround for Safari bug when an element with animated "translate(%)" is resized

【发布时间】：2018-03-04 13:25:00

【问题描述】：

正在为我在 Safari（版本 10.1.1）中遇到的错误寻找解决方法，在该错误中，使用 % 翻译为“转换”设置动画的元素在调整元素大小时无法正确更新。

这是一个示例用例：其中图像位于类似于背景“封面”的文本区域后面，使用：

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 潜在修复的想法或帮助将不胜感激。类似于“强制”Safari 通过更改其他一些属性不使用 javascript 来重新计算动画？

澄清一下，我不是在寻找一种解决方法来使背景图像居中。我正在寻找一种解决方法来允许使用动画 translate(%) 值。

【问题讨论】：

还要记住 transform 是依赖于浏览器的，所以使用这样的东西可能有助于转换： translate(-50%, -50%); -webkit-transform: 翻译(-50%, -50%); -moz 转换：翻译（-50%，-50%）； -o-transform: 翻译(-50%, -50%);

【参考方案1】：

尝试使用will-change: transform; 这“应该”在该层上强制 GPU 渲染。有性能成本，但听起来好像 Safari 没有正确重绘。

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

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