css转换+；宽度+；左&x2B；safari浏览器上的顶部转换跳转

我使用以下代码实现了一个转换：

h1 {
position: absolute;
z-index: 2;
line-height: 1;
font-size: 8em;
transition: all 10s;
pointer-events: none;
font-weight: 600;
width: 800px;
font-family: 'Crimson Text', serif;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

&.top-left {
  top: 0%;
  left: 0%;
  transform: translate(0%, 0%);
  width: 300px;
  font-size: 3em;
}

而且它在Safari上不能按需要工作。我尝试做缩放动画，但效果相同。 知道怎么解决吗

铬：

狩猎：

---

问题在于，您正在导致属性转换，从而迫使浏览器计算布局更改（

宽度

&

字体大小

）

这个问题的原因与浏览器计算屏幕上呈现内容的顺序有关。通常是这样的顺序：

样式（要应用的内容-CSS特性）

布局（宽度/高度、字体大小、边距/填充、显示）

绘制（颜色、边框、背景、阴影等）

合成（位置、比例、不透明度等）

动画制作#3和#4非常有效。其他的东西没有那么多，所以最好尽量避免这些

---

您可以做一些事情来全面提高性能

首先强制计算机使用其GPU进行渲染。最简单的方法是使用

3d变换

h1 {
transform: translate3d(-50%, -50%, 0);
}

&.top-left {
  transform: translate(0, 0, 0);
}

接下来，我们将处理此元素，以便它可以准备更高效

h1 {
 will-change: transform;
}

最后，我们需要重新思考

转换

本身，以避免更改布局。 让我们通过删除

字体大小

和

宽度

属性并替换为

变换：缩放

来实现这一点，在理想情况下，我们可以删除顶部/左侧位置之间的过渡，但在这里可能没有问题

h1 {
   position: absolute;
   z-index: 2;
   line-height: 1;
   font-size: 8em;
   transition: all 10s;
   pointer-events: none;
   font-weight: 600;
   /* width: 800px; */
   font-family: 'Crimson Text', serif;
   margin: 0;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%, 0) scale(1);
   will-change: transform;
}
&.top-left {
  top: 0%;
  left: 0%;
  transform: translate(0, 0, 0) scale(0.25);
  /* width: 300px; */
  /* font-size: 3em; */
}

---

对于没有任何文本内容的固定大小的div，它是否也做同样的事情？用纯色背景画一个正方形。如果你在文本上使用像素大小，会发生这种情况吗？你能创建一个工作示例来复制你所看到的吗？我有一些想法，但不值得在自己无法尝试的情况下抛出“你尝试过这个还是那个？”。另外，你能在不改变宽度的情况下完成吗？这会导致文本在每一帧上回流。我目前没有把它放在小提琴上。但我在网上有它@BryceHowitson