Safari浏览器在旋转变换后渲染SVG两次

Question

当在浏览器中呈现切换框时，点击标题应打开/关闭切换内容区域，并且还旋转SVG箭头180度。这在除Safari (移动和桌面)之外的所有浏览器中都能正常工作。它似乎可以同时呈现两个版本的SVG箭头。

i {
    position: absolute;
    right: 0;
    margin-right: 12px;
}

.active i { 
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari 3-8 */
}

此小提琴中提供的示例代码：https://jsfiddle.net/e6gbdkaL/1/

Answer 1

与SVG转换有些关系。

您需要定义transform-origin并对<g>元素应用旋转。

i > svg > g {
  transform-origin: 50% 50%;
  transform: rotate(0deg);
}
.active i > svg > g {
  transform: rotate(180deg);
}

请参阅此小提琴以获取可行的解决方案：https://jsfiddle.net/df75g16k/

Answer 2

我发现我还需要摆弄宽度/高度、填充和z-index，以修复旋转转换后Safari切掉SVG边缘的位置。

i {
    position: absolute;
    right: 0px;
    width: 24px;
    height: 24px;
    background: transparent;
    z-index: 25;
    padding: 0 12px;
    margin-right: 12px;

    > svg { width: 24px; }

    > svg > g {
        min-width: 24px;
        transform-origin: 50% 50%;
        transform: rotate(0deg);
    }
}

.active i > svg > g {
    transform: rotate(180deg);
}