Why does bootstrap use transform:translate3d instead of top/left to position absolute elements?

Question

css

In bootstrap for various dropdown menus, tooltip, popover etc. an element with position:absolute is used, which usually has top:0, left:0 set, and transform: translate3d(100px, 200px, 0px) is applied for positioning;
What is the reason for such a choice? If I remove the transform and manually specify the top/left as they were specified in translate3d(), then everything seems to work and the fonts do not blur.
The fact is that at some scales and locations, the fonts in the menu and tooltip are very blurry in chrome (for ff, everything seems to be ok). Can this choice be due to compatibility with some other browsers, or can we just change the code in the tooltip / dropdown components?

Answer 1

Because it's more productive. This is GPU accelerated + doesn't call repaint since transform doesn't change the actual position of the element. Read any article on why this is so. Over the past 8 years, there have already been hundreds, if not thousands, of any degree of immersion in the topic.
The way to get rid of ripples in Chrome due to transform is to set the transform initially, and then remove it on hover:
Unfortunately, there is no other method that would really fix this. Either half measures, or as I described above. As for how it works in Bootstrap, I don’t know, but I’m 99% sure that modifying components for this algorithm will not be so difficult and will take about 10 minutes.