Streaming live at 10am (PST)

Fixed Menu jumping/shifting on page scroll only in Edge


#1

I’m not sure if this is to do more with interactions or with layout so I just put it here, hope that’s ok.

I’m experiencing an issue only within Microsoft Edge at this time. I have a fixed menu that appears when the page is scrolled partly down and hides when scrolled back up. Fairly standard stuff and it works well in all browsers (even IE) except for Edge.

If you look in Edge as you scroll the menu will appear but then it gets all jittery… definitely not a good look! Is this a serious bug in Edge or does anyone know of any workarounds to fix this? I saw some conversations about a fixed background image bug in Edge but nothing about other fixed elements.


Here is my site Read-Only: https://preview.webflow.com/preview/fictiv-new?utm_source=fictiv-new&preview=8baca3c33d6cab99715f330e2591ccb5

Here is the staging link: http://fictiv-new.webflow.io/


#2

Is it happening when you scroll with the mousewheel, or with a touchpad?

If it’s linked to the — yet unfixed — fixed backgrounds bug, you can maybe try this JS fix:


#3

I just checked and it happens with the trackpad, clicking and dragging the scroll bar, using the scroll wheel, but NOT when I hold down my scroll wheel and let the page scroll automatically. So strange!

I will take a look at that JS fix, thanks for the link.


#4

I doubt it will work but you should try it.

Fixed elements force the browsers to redraw the page constantly, in some cases. Especially true for fixed bckgrounds. That’s why fixed things only start to be allowed by mobile browsers nowadays, because htey make a page very demanding on the system. Edge has notorious issues with fixed backgrounds, but like you I haven’t found much cases involving lone fixed elements.

Something quick to do, just because it’s quick:

Remove your fixed navbar. Drag a new navbar from the Add menu, don’t bother styling it, keep it as is, just make it fixed to the top. Be sure to place the navbar element at the root of the site, just under the body element, and to define a z-index that is superior to any of those of the sibling elements. See if the bug happens with this minimal menu configuration. If it happens, then copy your newly made minimum menu, put it in a new page, add a section under it with height 200vh (so that you have something to scroll), and see if, again, it’s happening.

Those steps to try to narrow down the culprit element or structure if there’s any. It’s pretty sane to try to reproduce bugs on blank pages with stock elments.