Не первый раз встречаю правило 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;
}
Комментариев нет:
Отправить комментарий