CSS трансформация + ширина + левый + верхний переход переход в браузере сафари - PullRequest
Новая
       21

CSS трансформация + ширина + левый + верхний переход переход в браузере сафари

0 голосов
/ 07 июня 2019

У меня есть переход с этим кодом: 

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. Вместо этого я попытался сделать масштабную анимацию, но она имеет тот же эффект. Есть идеи, как это исправить?

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

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

1 Ответ

1 голос
/ 07 июня 2019

Проблема в том, что вы вызываете переход свойств, заставляющий браузер вычислять макет изменения (width & font-size).

Причина, по которой проблемаЧтобы сделать заказ, браузеры рассчитывают, что отображается на экране.Обычно это в следующем порядке:

  1. Стили (что применять - специфичность CSS)
  2. Макет (ширина / высота, размер шрифта, поля / отступы, отображение)
  3. Рисование (цвет, граница, фон, тени и т. Д.)
  4. Композитный (положение, масштаб, прозрачность и т. Д.)

Анимация # 3 и # 4 довольно эффективна.Других вещей не так много, поэтому лучше постараться избегать их.

Есть несколько вещей, которые вы можете сделать, чтобы улучшить производительность по всем направлениям

Первый заставить компьютер использовать его графический процессор для рендеринга.Самый простой способ сделать это с помощью 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; */
}
...