@noneim

Почему в bootstrap используют transform:translate3d вместо top/left для позиционирования абсолютных элементов?

В bootstrap для различных dropdown меню, tooltip, popover и т.п. используется элемент с position:absolute, у которого обычно заданы top:0, left:0, а для позиционирования применен transform: translate3d(100px, 200px, 0px);
Чем обусловлен такой выбор? Если удаляю transform и вручную указываю top/left такими, какими они были указаны в translate3d(), то всё вроде бы работает и шрифты не замыливаются.
Дело в том, что при некоторых масштабах и расположениях шрифты в меню и tooltip сильно замыливаются в chrome (для ff вроде бы все ок). Может ли такой выбор быть обусловленным совместимостью с другими какими-то браузерами, или можно просто поменять код в компонентах tooltip/dropdown?
  • Вопрос задан
  • 154 просмотра
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Потому что это производительнее. Это ускоряется GPU + не вызывает repaint, т. к. transform не меняет реальное положение элемента. Прочитайте любую статью на тему, почему это так. За последние лет 8 их уже сотни, если не тысячи, и любой степени погружения в тему.

Способ избавиться от ряби в Chrome из-за transform — задать transform изначально, а уже на hover убирать его:



Иного метода, который бы по-настоящему исправил это, к сожалению, — нет. Либо полумеры, либо так, как я описал выше. Касательно того, как там устроено в Bootstrap — я не знаю, но на 99% уверен, что модификация компонентов под этот алгоритм не будет такой уж сложной и займет минут 10.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы