Fixing Position Sticky?
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
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
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.