在safari浏览器上的css转换+宽度+左+顶过渡跳转

Question

我有一个用以下代码实现的转换：

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

狩猎旅行：http://www.giphy.com/gifs/QW9RGCPQoqkFeRWLu7

Answer 1

问题是，导致属性转换，迫使浏览器计算布局更改(width & font-size)。

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

1. 样式(应用什么- CSS特性)
2. 布局(宽度/高度，字体大小，边距/填充，显示)
3. 油漆(颜色、边框、背景、阴影等)
4. 合成物(位置、比例、不透明度等)

动画#3和#4是相当有效的。其他的事情没那么多，所以最好试着避免这些。

你可以做几件事来全面提高业绩

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

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

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

，下一个，让我们使用告诉浏览器，我们将处理这个元素，这样它就可以变得更高效了。

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