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

Question

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

transform: rotate(180deg);

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

transition: transform 120ms $some-easing;

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

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

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

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

标签： cssangularsasssafari

Answer 1

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

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