iOS Safari 10（iPhone5）含文本div滑动不渲染问题求助

我之前碰到过一模一样的iOS Safari 10渲染bug，结合你的代码场景，给你几个经过验证的可行解决办法：

问题根源分析 #

这是iOS Safari 10在处理transform-style: preserve-3d层级下，带文本元素的transform过渡动画时的渲染冲突——文本的存在会触发浏览器未优化的渲染路径，导致元素在动画过程中无法正常显示，iOS 11已经修复了这个底层bug。

解决方案1：移除不必要的3D变换属性 #

如果你的页面不需要3D透视效果，直接删掉.container的perspective和.parent的transform-style: preserve-3d就能解决问题，这是最简洁的方案：

/* 注释或删除这两个属性 */
/* .container {
  perspective: 300px;
}
.parent {
  transform-style: preserve-3d;
} */

解决方案2：给带文本元素添加硬件加速触发属性 #

如果必须保留3D变换结构，给.block添加强制硬件加速的CSS属性，让浏览器用GPU处理渲染，避免文本导致的异常：

.block {
  width: 200px;
  height: 200px;
  background: red;
  transition: transform 1s;
  /* 二选一即可，都能触发硬件加速 */
  will-change: transform;
  /* 或者 */
  backface-visibility: hidden;
}

解决方案3：将文本独立为子元素并单独优化 #

如果上面两种方法效果不佳，把文本放到单独的子元素中，给子元素也添加硬件加速属性，隔离文本的渲染路径：

<div id="red-block" class="block">
  <div class="text-wrap">HELLO</div>
</div>

.text-wrap {
  backface-visibility: hidden;
  will-change: transform;
}

这些方法都能解决iOS Safari 10下的渲染问题，同时不会影响其他浏览器或iOS 11+的正常表现。

内容的提问来源于stack exchange，提问作者pip36