Steps to reproduce
I’ve created a codepen with (what i consider) advanced use of position: sticky. See https://codepen.io/jpzwarte/full/YerwMQ/
The .logo-wrapper div is transformed to appear over the fixed page header. The back button is also transformed to appear over the image header. The result is that when the user scrolls down, it appears that the button “pushes” the logo out of the fixed page header and takes its place.
I’ve tested the example in the latest releases of Chrome, Firefox and Safari and all work fine. Edge however is another story.
Scroll behaviour of the logo seems to be fixed recently (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15018231/)
Another bug i’m seeing is that position sticky on the button causes the translateY transformation to “malfunction” somehow. It does not appear where it is supposed to. When i disabled position: sticky using the devtools, the button appears in the right position.
See the video in this tweet for what i expect to see in Edge: https://twitter.com/jpzwarte/status/962754844019904512
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Francois R.”
Thanks for the bug, I’ll take a look in a few weeks when the sticky bugs we are currently tracking get fixed, to see if there is any remaining work to be done here. I’ll let you know what I find out.