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

#css

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

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

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

Ответы

Ответ 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;
}
1
2
3