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

Question

[noneim]

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

Comments

[Rustam Bainazarov]

Потому что это производительнее. Это ускоряется GPU + не вызывает repaint, т. к. transform не меняет реальное положение элемента.

Прочитайте любую статью на тему, почему это так. За последние лет 8 их уже сотни, если не тысячи.

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

Answer 1

[Rustam Bainazarov]

Потому что это производительнее. Это ускоряется GPU + не вызывает repaint, т. к. transform не меняет реальное положение элемента. Прочитайте любую статью на тему, почему это так. За последние лет 8 их уже сотни, если не тысячи, и любой степени погружения в тему.

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



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

Comments

[noneim]

Спасибо, теперь всё понятно! ) Если дело только в производительности, то отображение/скрытие менюшек это не то, что стоит оптимизировать, т.к. в отличии от анимированных всяких штуковин происходит не более 1 раза в секунду.