Material-design-lite: Bad positioning of tooltips
More of an edge case but nonetheless happening in an app I am currently developing. This scenario only happens if a scroll bar is present and the element in question has a translate applied via CSS.
See example here (hover over red box)
Something like this would theoretically fix the issue (I think)
let rect = el.getBoundingClientRect();
let left = rect.left + window.pageXOffset;
let top = rect.top + window.pageYOffset;
// now we have a more accurate representation of the current top / left coords
brandonjpierce
All 3 comments
Interesting bug. I can confirm it is happening due to the transform, but I don't understand _why_. This should be addressed since it could be a pretty common thing being done now with the recent push for animations by the web.
Garbee
on 8 Jul 2015
TIL!
The observed behavior is correct as per CSS spec:
For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
Our tooltips are positioned using position: fixed. That means, by applying a transform – even if it is a NOP – you moved the origin for fixed positioning.
The easy fix is to move the tooltip to another container (or body).
surma
on 9 Jul 2015
Hm, very interesting. At least we know now and can point people here if it comes up again. Thanks for doing the research @surma!
Garbee
on 9 Jul 2015
Related issues
baldram
·
4Comments
tleunen
·
5Comments
itisparas
·
3Comments
shazada
·
5Comments
DeepSwami
·
3Comments
Most helpful comment
TIL!
The observed behavior is correct as per CSS spec:
Our tooltips are positioned using
position: fixed. That means, by applying a transform – even if it is a NOP – you moved the origin for fixed positioning.The easy fix is to move the tooltip to another container (or
body).