Что дает наличие transform: translateZ(0) scale(1, 1) в body

337
16 декабря 2017, 05:03

Не первый раз встречаю правило transform: translateZ(0) scale(1, 1), какое применяется к тегу <body>.

Вопрос, что дает данное правило?

Так как у меня от него следующий проблемы: border не всегда прорисовывается в таблице и иногда изображения не прогружаются (случай в Google Chrome).
Но! Когда отключаешь это правило, сайт сдвигается(пока еще не понял почему, ведь значения стандартные ИМХО).
На сайтах где-то прочитал, что это для того, чтобы мерцания не было ( но может я не правильно понял). Спасибо

Answer 1

Без минимального, самодостаточного и воспроизводимого примера вашей конкретной ошибки сложно сказать наверняка.

Обычно translateZ(0) прописывают для того, чтобы отрисовать элементы в GPU еще до того, как анимация началась, чтобы анимация была плавной, без дерганий. tranform не перерисовывает объект, он работают напрямую с GPU памятью, которая использует аппаратное ускорение.

scale(1, 1) увеличивает содержимое блока в 110% от нормы. Скорее всего именно поэтому вы не видите некоторые бордеры, границы содержимого. Ведь они больше ширины блока на 10% и скорее всего просто в него не влезли. Можете попробовать прописать принудительно overflow. Возможно у вас что-то наподобие вот этого:

div { 
  height: 50px; 
  margin: 20px; 
  border: 5px solid red; 
  transform: translateZ(0) scale(1.1); 
} 
 
.one { 
  overflow: hidden 
} 
 
.two { 
  overflow:auto 
} 
 
.three { 
  overflow: visible; 
} 
 
span { 
  height: 50px; 
  display: block; 
  border: 5px solid green; 
}
<div class=one><span>1</span></div> 
<div class=two><span>2</span></div> 
<div class=three><span>3</span></div>

READ ALSO
Нужна помощь с pop up

Нужна помощь с pop up

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

262
Выбор кодировки для MySQL

Выбор кодировки для MySQL

Начал свой проект, хочется сразу использовать лучшие наработки

343