带有转换和translateY的Safari bug：“jumping”元素

基础概念

transform 和 translateY 是 CSS 中用于二维变换的属性。transform 属性允许你对元素进行旋转、缩放、移动或倾斜。translateY 是 transform 的一个子属性，用于沿 Y 轴（垂直方向）移动元素。

类型

2D 变换：包括 translate、rotate、scale、skew 等。
3D 变换：在 2D 变换的基础上增加了 translateZ、rotateX、rotateY、rotateZ 等。

应用场景

动画效果：用于创建平滑的动画效果，如滚动、滑动等。
布局调整：用于动态调整元素的位置和大小。

问题描述

在 Safari 浏览器中，使用 transform 和 translateY 进行动画时，有时会出现元素“跳跃”（jumping）的现象。这是因为 Safari 在处理某些变换时，可能会对元素的布局进行重新计算，导致元素在动画过程中出现不连续的移动。

原因

合成层问题：Safari 在处理合成层时，可能会对元素的布局进行重新计算，导致元素在动画过程中出现跳跃。
硬件加速：某些情况下，硬件加速可能会导致元素在动画过程中出现不连续的移动。

解决方法

使用 will-change 属性：
使用 will-change 属性：
这个属性可以提前通知浏览器元素将要发生变化，从而优化渲染性能。
使用 translate3d 替代 translateY：
使用 translate3d 替代 translateY：
translate3d 会触发硬件加速，从而减少元素跳跃的可能性。
使用 position: fixed 或 position: absolute：
使用 position: fixed 或 position: absolute：
通过将元素的定位方式改为 fixed 或 absolute，可以减少浏览器对布局的重新计算。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TranslateY Bug Example</title>
  <style>
    .element {
      width: 100px;
      height: 100px;
      background-color: red;
      will-change: transform;
      animation: move 2s infinite alternate;
    }

    @keyframes move {
      from {
        transform: translate3d(0, 0, 0);
      }
      to {
        transform: translate3d(0, 200px, 0);
      }
    }
  </style>
</head>
<body>
  <div class="element"></div>
</body>
</html>