Страницы

Поиск по вопросам

понедельник, 3 декабря 2018 г.

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

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


Ответ

Без минимального, самодостаточного и воспроизводимого примера вашей конкретной ошибки сложно сказать наверняка.
Обычно 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

Комментариев нет:

Отправить комментарий