angular - CSS 仅在 Firefox 上转换缩放和翻译滞后

Question

我正在使用变换 scale() 和 translate3d() 为悬停的标题设置动画。我的 Typescript 在三个不同的 div 上监听 mousemove 并相应地更改 svg 图像的 translate3d 样式。

在 Chrome 和 Edge 上一切正常，但在 Firefox 上动画效果不佳。因此，在 scale() 转换期间以及有时在 translate3d() 期间，性能似乎会下降。我制作了这个stackblitz来重现我的问题。

我知道浏览器之间的性能已经在这里讨论过，但是我尝试了所有遇到的解决方案，但都没有成功：

• 使用带有变换的廉价动画，而不是更改元素的宽度/边距
• 在绝对定位中修复元素
• 更改背面可见性
• 使用 will-transform
• 通过 translateZ() 或 rotateZ() 欺骗浏览器以使用硬件加速

我仍然使用 padding-top 方法来制作我的 div 方块，但是即使我删除它，延迟仍然存在。

有没有办法调整我的动画以使用更少的 CPU？为什么 Firefox 不能处理这些？

提前感谢您提出的任何建议。

标签： angularcss-animationsscalecss-transformstranslate3d