Today I Learned

Safari half sticky element problem

Safari has weird bug about sticky elements in flexboxes, those sticky elements get scrolled after a while - more like in the half of the scrollbar, which is pretty confusing.



Open the link in the Safari, scroll the mid (yellow) section and notice that green bar (sticky element) gets also scrolled after a while.

Desktop elements

The problem is that in Safari sticky element cannot be flex item (direct child of a flex) whenever the sticky element is not the only child of a flex and the neighbour of sticky element has specified flex-shrink or flex-basis .



Simply add one additionalwrapper for sticky element and the problem should be solved :)