Safari浏览器上的css变换+宽度+左+顶部过渡跳转

Posted 2023-03-06

【中文标题】Safari浏览器上的css变换+宽度+左+顶部过渡跳转

【英文标题】：css transform + width + left + top transition jump on safari browser

【发布时间】：2019-10-23 07:57:17

【问题描述】：

我用这段代码实现了一个转换：

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 上按需要工作。我尝试做缩放动画，但效果相同。 知道如何解决这个问题吗？

铬： http://www.giphy.com/gifs/VzkdenswxQA29t6sNH

Safari： http://www.giphy.com/gifs/QW9RGCPQoqkFeRWLu7

【问题讨论】：

它对没有任何文本内容的固定大小的 div 做同样的事情吗？例如：用纯色 bg 制作一个正方形。如果您在文本上使用像素大小会发生这种情况吗？

您还可以创建一个工作示例来复制您所看到的吗？我有一些想法，但不值得抛出“你尝试过这个或那个吗？”无法亲自尝试。另外，你能在不改变宽度的情况下做到这一点吗？这会导致文本在每一帧上重排。

我目前没有它。但我在网上有它capture7.com/preview/showfields-pos-rx1gBCRAcciupQ@BryceHowitson

【参考方案1】：

问题在于您正在导致属性转换，迫使浏览器计算布局更改（width & font-size）。

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

样式（应用什么 - CSS 特性） 布局（宽度/高度、字体大小、边距/填充、显示） 绘画（颜色、边框、背景、阴影等） 复合（位置、比例、不透明度等）

动画 #3 和 #4 非常有效。其他的东西不多，所以最好尽量避免。

---

您可以采取一些措施来全面提高性能

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

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


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

接下来，让我们tell the browser 来处理这个元素，以便它准备好提高效率。

h1 
 will-change: transform;

最后，我们需要重新考虑transform 本身以避免改变布局。 让我们通过删除 font-size 和 width 属性并替换为 transform: scale 来做到这一点。在理想情况下，我们会删除顶部/左侧位置之间的转换，但在这里可能没问题。

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; */