Sticky nav jumping when starting to scroll in edge browser

[Mirko]

If I open my website in the edge browser and start to scroll, the transition between the normal navigation and the sticky nav is not smooth. It looks like the navigation is jumping. In Chrome it works well. What could be the issue here?

Thanks in advance

GeneratePress 2.2.2

GP Premium 1.8.1

[Tom]

Hi there,

I’m on Mac right now so I can’t try Edge, but everything looks good in Chrome.

What version of Chrome are you using?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mirko]

Hi Tom,

thank you for your quick response.

To clarify again, on Chrome it works well.

My request solely arises from obvious compatibility issues: based on customer feedback, there is the described issue when using EDGE browser.

As we are a web agency that promises modern websites that work smooth on all major plattforms and as we build almost every website on GeneratePress we are currently investigating what causes that issue and hope you could point us in the right direction.

[Tom]

Ah sorry – misread.

I can’t replicate yet, but I’ll keep trying.

Does the same thing happen for you here?: https://gpsites.co/pivot/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mirko]

Hi Tom,

no worries. Hopefully we can solve it somehow.

Yes it also happens on that page you mentioned. Using edge and scrolling, there is a “hard jump” before the animation starts. Using Chrome it looks good and smooth.

Thanks 🙂

[Tom]

I’ll do some more tests and will report back ASAP 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom]

Been playing with this and can’t replicate it. Can you show me a short video/gif of the issue so I know what I’m looking for?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mirko]

Hi Tom, sure, how can I send you the video?

[David]

Hi there,

you would need to provide a link to the video file that is on a shared drive or hosted. Or alternatively use a free account with Loom or Screencast to make the recording and sharing simpler.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mirko]

Hi,

here you go: https://drive.google.com/file/d/1IeQLOjJYIjO0nlSvk62rhxNYYjaMM2yS/view?usp=sharing

[Tom]

I assume that’s just Edge being slow to pick up the sticky element. Is the sticky transition set to “None”?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mirko]

Yes, it is set to “none”.

[Tom]

I’m assuming this is a rendering issue in Edge. I’ll play with it but I’m not 100% confident we’ll be able to do anything about it, unfortunately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mirko]

Ok Tom, thanks for your help!

[Tom]

No problem – I’ll see what I can do 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts