在移动 WebKit（Safari 和 Chrome）上制作动画之前，CSS 过渡会跳转到最终状态并再次返回答案

【问题标题】：CSS transition is jumping to final state and back again before animating on mobile WebKit (Safari & Chrome)在移动 WebKit（Safari 和 Chrome）上制作动画之前，CSS 过渡会跳转到最终状态并再次返回
【发布时间】：2018-09-01 13:57:34
【问题描述】：

我需要在几秒钟后通过 JavaScript 触发一个 div 以使用 CSS 缩放转换进行缩小。我尝试过手动切换类或设置 CSS，但任何一种方法都会导致我的 iPhone iOS 11 在 Safari 或 Chrome 上闪烁。

红色 div 首先非常快速地跳转到最终比例，然后又返回，然后正确地设置动画。

在桌面上的 Chrome 和 Safari 上，它的动画非常流畅。

https://jsfiddle.net/2fy3acup/6/

HTML

<div id="title">
Hello
</div>

CSS

#title {
  background: red;
  transform: scale(1);
  transition: transform 1s;
}

#title.smaller {
  transform: scale(0.3);
}

setTimeout(function() {
// Glitches on mobile webkit
//document.getElementById("title").classList.add("smaller");
// Also glitches on mobile webkit
document.getElementById("title").style.transform = 'scale(0.4)';
}, 1000);

我做错了吗？

【问题讨论】：

-webkit-backface-visibility: hidden; 可能是一个可能的解决方案（最初来自stackoverflow.com/questions/3461441/…）
遗憾的是，与此类似的修复都没有解决问题。我尝试了很多关于设置更多 3D CSS 属性以解决闪烁的建议，但无济于事。

标签： javascript css transform transition

【解决方案1】：

经过一些实验，我发现我的 iOS 设备（移动 Safari 和 Chrome）上的视觉故障是由操作系统引起的。它在其他设备上不存在，并且在重新启动我的设备后它按预期工作。

【讨论】：