Page jumps when the menu is minimized

Elements
1

My website behaves differently on my iPhone than on my desktop in one small respect:

When the page is scrolled, the menu shrinks. On my iPhone, the page jumps up or down when the menu is enlarged again.

This doesn’t happen on my desktop, even if I adjust the size accordingly so that the mobile menu is used.

I’ve created an example: elementsapp://downloadDocument/pK5C2r8C7AYF

You can access it directly here: https://www.cornrow.de/menutest

I’d be happy if anyone could give me a tip.

3

The page jumps not the shrinking menue. It’s an difference between macOS Vivaldi Browser and iPhone Vivaldi Browser (both Chromium engine). Even if i reduce the size on the desktop.

5

You scroll very fast but i could see the diference. If you scroll slow and reaches the point where the menu changed its size the underlaing text jumps. This won’t happen on the desktop.

6

like this

7

this is my desktop

8

Thanks for your help.

Still

  • Chrome based Browsers macOS and Windows
  • Firefox macOS and Windows

Moving

  • all Browsers on iPhone (did they use Safari Engine?)
  • Safari on macOS

I don’t use Safari. So i never seen this on my desktop.

9

Please tell me you got this fixed. Cause I honestly don’t see a difference. Maybe it’s because of the scale of things different on the iPhone versus the desktop.

10

In your css I changed all the 0.5s to 0.1s made a better transition for me, or to my eyes anyway

11

No, I can’t fix it. It’s the browser’s fault. Maybe something could be improved in the JS? But that’s beyond my capabilities and patience.