Published
CSS note-to-self: `position:fixed;` is not respected within transformed block elements
Note to self: position:fixed;
is not respected if the fixed element is within a transformed element.
See a very old meyerweb.com article on the topic. Apparently this is expected behaviour, not a bug, hence why people are still encountering this funkiness nine years after Eric Meyer’s article. As he suggests, it’s a little counter-intuitive!
In my case, it related to a fixed element within a <div>
that was being transitioned from off screen to on the screen. I was able to get around it by reversing the transform so that when the element needed to be fixed, I set the containing element to transform: none;
. That wouldn’t work in every case though, so YMMV.