Angular项目Safari下执行transform: rotate时出现两个重叠图标问题

这个问题是Safari内核特有的CSS渲染bug导致的，具体触发逻辑如下：

• Safari对CPU渲染的transform过渡动画的图层回收机制存在缺陷：过渡动画执行过程中会生成临时渲染图层，动画结束后旧图层没有被及时销毁，就会同时显示默认状态和旋转后的最终状态两个图标，形成重叠效果。Chrome和Firefox的图层清理逻辑更完善，因此不会出现该问题。
• 自定义cubic-bezier缓动函数会进一步放大这个渲染缺陷，触发概率比使用内置缓动函数更高。如果你的图标是字体图标或者内联SVG元素，也会提升该bug的触发概率。

可以任选以下任意一种方法修复：

• 给图标元素显式开启GPU加速，让Safari使用独立合成图层渲染transform动画，避免图层残留：

/* 替换为你的图标实际选择器 */
.arrow-icon {
  will-change: transform;
}

如果担心will-change的兼容性，也可以用更传统的hack方式：

.arrow-icon {
  transform: translateZ(0);
}

• 若开启GPU加速后仍有问题，额外添加禁用背面渲染的属性：

.arrow-icon {
  backface-visibility: hidden;
}

• 部分场景是因为默认状态没有显式声明初始transform值导致的，给默认状态补全初始值即可：

.arrow-icon {
  transform: rotate(0deg);
  transition: transform 120ms $some-easing;
}

内容的提问来源于stack exchange，提问作者Skafec