I have been messing around with position: sticky on my website for elements where it matters little to me if the property is supported or not.

In testing with Firefox, Chrome and Safari, I noticed that Safari needed the prefixed position: -webkit-sticky.

OK, no big deal.

What was a bit of a head scratcher though was, in macOS Safari alone, the primary content of the page would scroll beneath the header. This happened regardless of the fact that the primary content was set to position: relative; and a higher z-index than the sticky header.

Fortunately, thanks to the transform: translate3d(0, 0, 0) hack (to whom I can’t recall deserves thanks for this discovery. So sorry, but thank you), one can force an element (the primary content of the site) to a higher z-index than the sticky element.

What is more frustrating about this issue is that I wanted to create a reduced test case to show off the problem, but it ended up being useless. The reason being is that the reduced test case worked as expected without the need for the transform: translate3d hack.

Clearly something else is going on with my website where it needs the hack, but a simpler demo does not.

Oh well. It got sorted so, onward and upward or something like that.