为什么 iOS Safari 会一个接一个地运行这个 CSS 转换多个转换？

Question

这在 Chrome 中完美运行并且可以平滑地更改图标，但在 iOS Safari（可能还有桌面 Safari）中，它会按顺序执行它们，等到另一个完成后再执行下一个：

Safari 过渡：

1. 旋转直到完成
2. 是否平移 (x,y)

这使得动画效果很差。在 Chrome 中，这一切都是同时完成的。

有没有办法在 Safari 中强制这样做？

https://jsfiddle.net/6nju07s8/

HTML：

<div class="error" id="outer">
<div class="line left">
</div>
<div class="line right">

</div>

</div>

CSS：

#outer,body,html
{
  width: 100%;
  height: 100%
}
.line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: .375rem;
    background-color: red;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    -ms-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
    -webkit-transition: transform 250ms;
    transition: transform 250ms;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.line.right {
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    -ms-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
}

.info .line {
    width: .375rem;
    height: .375rem;
    -webkit-transform: translate(-50%,-50%) translateY(-1.0625rem);
    -ms-transform: translate(-50%,-50%) translateY(-1.0625rem);
    transform: translate(-50%,-50%) translateY(-1.0625rem);
    background-color: blue;
}

.info .line.right {
    width: 1.75rem;
    height: .375rem;
    -webkit-transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
    -ms-transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
    transform: translate(-50%,-50%) translateY(.4375rem) rotate(90deg);
    background-color: blue;
}

JS（可选）：

var outer = document.querySelector( "#outer" );

outer.onclick = function()
{
  if ( outer.className === "info" ) { outer.className = "error"; }
  else outer.className = "info";
}

Answer 1

我发现 Safari 桌面存在问题。我不确定这是否是您所说的同一个问题，但是当 transform 和 width 上的 transition 出现问题时。

我认为问题与 Safari 在 width 更改后重新定位元素有关。在其他浏览器中它似乎流畅地发生，在 Safari 中它是“生涩的”。

你可以看到a simplified example of that behaviour here。不幸的是，我不确切知道为什么会发生这种情况，但我们可以通过调整方法来达到相同的效果。这就是我的建议。

---

我没有更改 width 值（以避免 Safari 中的问题），而是使用了 scaleX(X) 属性。这会给你一个非常相似的视觉效果（调整线条的“高度”）并且不应该引入问题。您还必须编辑 top 值以在缩放元素后重新定位元素（或调整 translate(-50%,Y) 值；我更喜欢使用 top）。

Here's a demo.我还做了一些 QoL 标记更改，如果你想在生产中使用它，你需要为所有内容添加前缀。

$('.box').click(function(){
	$(this).toggleClass('info');
});

.parent {
    width: 100%;
    height: 100vh;
}

.box {
    width: 50px;
    height: 50px;
    background: lightblue;
}

.va {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
}

.line {
    display: inline-block;
    background: white;
    width: 2.5rem;
    height: .375rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all 250ms;
    transform: translate(-50%,-50%) rotate(45deg);
}

.line.right {
    background: red;
    transform: translate(-50%,-50%) rotate(-45deg);
}

.info .line.left {
    top: 20%;
    transform: translate(-50%,-50%) rotate(90deg) scaleX(.15);
}

.info .line.right {
    top: 60%;
    transform: translate(-50%,-50%) rotate(90deg) scaleX(.65);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent error">
    <div class="box va">
        <div class="line left"></div>
        <div class="line right"></div>
    </div>
</div>