search

githubocto / flat-ui

MIT License
373 stars 23 forks source link

Header (column names + histograms) aren't sticky Safari #13

Closed colmanhumphrey closed 3 years ago

colmanhumphrey commented 3 years ago

E.g. using this example data: https://flatgithub.com/the-pudding/data?filename=boybands%2Fboys.csv&sha=9b4e89ed178e11bf70a9b3d8ffa57ac2ea181b96

In Firefox and Chrome, this works well: the body scrolls while the header stays in place:

https://user-images.githubusercontent.com/6945891/130460177-9d4c4cd7-43bb-4c41-b314-a55be1d43f69.mp4

However in Safari, the header scrolls away too:

https://user-images.githubusercontent.com/6945891/130460376-680677ef-f6c1-484e-a139-3e352339a0a2.mp4

I seem to recall having a somewhat similar issue previously with my own code, with flex acting differently in Safari, however the details don't come directly to mind. I can try at least to have a quick look to see what's causing it here!

I'm on macOS Big Sur 11.3.1, Safari 14.1.

Thanks!

Wattenberger commented 3 years ago

thanks for reporting this! I dug around a bit and it looks like the issue is only on desktop, when the left column is stickied. Still a very strange bug, maybe related to using inline-flex for the sticky header cells? I'd love if you had any ideas!

colmanhumphrey commented 3 years ago

Ah seems that's basically the problem: for Safari, sticky only works in block-level elements.

I set up a quick example here: https://stackblitz.com/edit/js-hftfti?file=index.html (direct link: https://js-hftfti.stackblitz.io), hopefully it's clear. The "default" header (block) and the explicit block work in safari, but not the inline-flex or inline-block (but all four work elsewhere).

Would it be a ton of work to have the sticky headers not be inline-flex?

Wattenberger commented 3 years ago

aha! got it working with good old-fashioned floats. Thanks for detective-ing with me!

colmanhumphrey commented 3 years ago

aha! got it working with good old-fashioned floats. Thanks for detective-ing with me!

Amazing! Was trying just now with all sorts of div wrappers around the headers... It "solved" it, but turns out safari has another bug where sticky-within-sticky appears to flicker a lot 😩.

Happy days!