Elements with position: sticky + transform sometime get only either applied (+Asserts)

Issue #15949572 • Assigned to Francois R.

Details

Author
Jeroen Z.
Created
Feb 14, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

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

Attachments

0 attachments

    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.

    • Microsoft Edge Team

      Changed Title from “sticky bugs” to “Elements with position: sticky + transform sometime get only either applied (+Asserts)”

    • Using the latest internal build, I see the button at the correct location, and it neatly finds its sticky place on the header bar when scrolled up. It however looks like the logo is no longer sticky, and scrolls with the page directly. When I open the devtools and trigger some invalidations, we hit an assert which means something fishy is going on. 

    You need to sign in to your Microsoft account to add a comment.

    Sign in