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

Question

所以在 Angular 项目中我有图标和下拉组件。 当下拉菜单打开时，使用的图标（箭头）得到 .open class applied which does:

transform: rotate(180deg);

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

transition: transform 120ms $some-easing;

$some-easing 是一个变量，包含特定的 cubic-bezier 缓动。

所以这在 Chrome 和 Firefox 中工作正常，但在 Safari 中不能正常工作。

在 Safari 中，动画被触发，在动画结束时默认图标状态和动画图标显示在同一个地方。

知道为什么会这样吗？

Answer 1

经过几个小时的深入研究，我发现转换应用于组件容器而不是图标本身。其他浏览器可以，但 safari 不行。

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