时间戳

首页 > 解决方案 > Safari浏览器上的css变换+宽度+左+顶部过渡跳转

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

问题描述

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

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

标签： csssasscross-browsercss-transitionstransition

解决方案

问题是您导致属性转换，迫使浏览器计算布局更改（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-sizeandwidth属性并用transform: scaleAnd 替换来做到这一点。在理想的世界中，我们将删除顶部/左侧位置之间的转换，但在这里可能没问题。

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

推荐阅读