Safari浏览器中的CSS变换+宽度+左+顶部过渡跳转 [英] css transform + width + left + top transition jump on safari browser

问题描述

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

  h1 {
位置：绝对； 
 z-index：2； 
行高：1； 
字体大小：8em; 
过渡：所有10s； 
指针事件：无； 
字体粗细：600; 
宽度：800像素； 
 font-family：深红色文字，衬线； 
保证金：0; 
最高：50％； 
剩余：50％； 
 transform：translate（-50％，-50％）; 
 
& .top-left {
 top：0％; 
还剩：0％； 
 transform：translate（0％，0％）; 
宽度：300像素； 
字体大小：3em; 
} 
  

在Safari上无法正常使用。我尝试做比例动画，但效果相同。
知道如何解决该问题吗？

Chrome浏览器：
http://www.giphy.com/gifs/VzkdenswxQA29t6sNH

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

解决方案

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

问题的原因与顺序浏览器计算屏幕上呈现的内容。通常按以下顺序进行：

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


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


3. 绘画（颜色，边框，背景，阴影等）


4. 复合（位置，比例，不透明度等）

动画＃3& ＃4效率很高。

---

您可以做一些事情来改善自己的状况。

---

全面的性能

首先，迫使计算机使用其GPU进行渲染。最简单的方法是使用 3d变换。

  h1 {
 transform：translate3d（-50％，-50％，0）; 
} 
 
& .top-left {
 transform：translate（0，0，0）; 
} 
  

下一步，让我们告诉浏览器，我们将弄乱这个元素，以便它可以准备提高效率。

  h1 {
 will-change：transform; 
} 
  

最后，我们需要重新考虑 transform 本身，以避免更改布局。
让我们通过删除 font-size 和 width 属性并替换为 transform：scale 在理想的世界中，我们将移除顶部/左侧位置之间的过渡，但在这里可能没问题。

  h1 {
位置：绝对； 
 z-index：2； 
行高：1； 
字体大小：8em; 
过渡：所有10s； 
指针事件：无； 
字体粗细：600; 
 / *宽度：800像素； * / 
字体系列：深红色文字，衬线； 
保证金：0; 
最高：50％； 
剩余：50％； 
 transform：translate（-50％，-50％，0）scale（1）; 
意志改变：转变； 
} 
& .top-left {
 top：0％; 
还剩：0％； 
 transform：translate（0，0，0）scale（0.25）; 
 / *宽度：300像素； * / 
 / *字体大小：3em； * / 
} 
  

I have a transition implemented with this code:

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

And it doesn't work as needed on Safari. I tried to do scale animation instead but it has the same effect. Any idea how to fix that?

Chrome: http://www.giphy.com/gifs/VzkdenswxQA29t6sNH

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

解决方案

The problem is that you're causing properties to transition that force the browser to compute layout changes (width & font-size).

The reason that's a problem has to do with the order browsers calculate what's rendered on the screen. It's usually in this order:

1. Styles (what to apply - CSS specificity)
2. Layout (width/height, font-size, margin/padding, display)
3. Paint (color, border, background, shadows, etc)
4. Composite (position, scale, opacity, etc)

Animating #3 & #4 are pretty efficient. The other stuff not so much so it's best to try avoiding those.

---

There's a couple of things you can do to improve performance across the board

First force the computer to use its GPU for rendering. The easiest way to do this is with a 3d transform.

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

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

Next, let's tell the browser we're going to mess with this element so it can get ready to be more efficient.

h1 {
 will-change: transform;
}

Finally, we need to rethink the transform itself to avoid changing layout. Let's do that by removing the font-size and width properties and replacing with a transform: scale And in an ideal world, we'd remove transition between top/left position but its probably ok here.

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

这篇关于Safari浏览器中的CSS变换+宽度+左+顶部过渡跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！