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.

Problem:

Link

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 .

Solution:

Link

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