Safari 在变换旋转时显示 2 个图标

Question

所以在 Angular 项目中，我有图标和下拉组件。 打开下拉菜单时，使用的图标（箭头）会应用 .open 类：

transform: rotate(180deg);

在默认状态下我定义了转换：

transition: transform 120ms $some-easing;

$some-easing 是一个包含特定三次贝塞尔曲线的变量。

所以这在 Chrome 和 Firefox 中运行良好，但在 Safari 中无法正常运行。

在 Safari 中，会触发动画，并且在动画结束时，默认图标状态和动画图标都会显示在同一位置。

任何想法为什么会发生这种情况？

Answer 1

经过几个小时的挖掘，我发现转换应用于组件容器而不是图标本身。其他浏览器对此很好，但不是 safari。

解决方案是将过渡和变换属性移至 SVG 元素。