Bar chart moves when hovering over [?]

[martinfleis]

See the video

https://github.com/alan-turing-institute/demoland-web/assets/36797143/5c6b2285-bf57-42fb-951e-551f049e3e1f

[yongrenjie]

Can repro in Safari, but works as intended in Firefox/Chrome...

[yongrenjie]

Notes for future self:

• Solution @ https://stackoverflow.com/a/27863860 The parent of the transformed element must be specified to be not transformed.
• The -webkit-transform line on its own works just fine, and on top of that, you don't need the -webkit prefix since Safari has supported the transform property since 2015 — so just setting transform: ... works fine
• This seems to be more of an issue with position: fixed rather than the transform itself, because the issue can be repro'd using only fixed position and without transform
• The reason why I used position: fixed originally was to make sure that the tooltip would appear above the sidebar. (For example, using position: absolute also allows the tooltip to be positioned above the thing being hovered over; however, it gets clipped at the edges of the sidebar.)
• The fix applied here stops other elements from moving when the tooltip appears, but also causes a regression in that the content is clipped again. This, apparently, has to do with the parent container (i.e. LeftSidebar) having overflow-y: auto, because if we remove that then it is no longer clipped.
  • This may apparently be related to a long-standing Safari bug: https://stackoverflow.com/questions/26704903 https://bugs.webkit.org/show_bug.cgi?id=160953
• Instead of trying to properly fix that bug, I've decided to just make the tooltip short enough so that it fits without clipping. Maybe one day I'll look at it properly.
  • Note that this actually defeats the purpose of using position: fixed. ... so maybe we should just go back to absolute.

Final verdict: go back to using position: absolute and make sure (by hand) that the tooltip box does not extend beyond the space occupied by its container.