Why website jumps to another section on rotate?

Hello,

I have a problem with the website jumping to another section when I rotate the view in the mobile version from horizontal to vertical and vice versa.

Here I recorded what I mean:
https://www.loom.com/share/8babe974d973411797350cb96f5e6825

The problem appears after I changed the navbar to a sticky or fixed position.

I have isolated the problem and it seems the sticky or fixed position of the navbar is the cause of the problem.
You can easily recreate the problem using the standard webflow template of the business site.
In the initial version, everything is ok and when you rotate the position of the website stays unchanged.
And after you change the navbar to a sticky position the problem appears.


Here is my site Read-Only:

https://preview.webflow.com/preview/testsite-dc6eaf?utm_medium=preview_link&utm_source=designer&utm_content=testsite-dc6eaf&preview=3d10717bb90a7100700491bb299187e4&workflow=preview

Do you have any idea how to solve it?

Thank you in advance for your help.

I’m not sure if I’ve mistaken, so let me know if it is otherwise.

The behavior you mentioned is normal because height of the website on bigger screen and smaller screen in most cases change.

Why?

Let’s say you’ve a row with 4 columns, each columns has a height of 400px. So in a bigger screen, height of the row would be 400px as stacked horizontally but in smaller screen we’ll stack it vertically, now the height of the row will be 4 columns x 400 = 1600px.

Now what I mean is any content under that row will get pushed further down in small screen. So you maybe on the same scroll position but the content will have to be pushed below.

So usually there will be many sections on a website which won’t fit on small screens and they have to be stacked vertically.

1 Like

The browser should be able to calculate everything and keep the position of the document during the rotation where it was. (no matter the height of elements).

And this behavior is ok when:

  • there is no sticky or fixed navbar.

I realized it is not a webflow issue but a general CSS issue.
Here is the link to the stack overflow topic:

Here is a link to the static navbar (as you can see the browser can manage to keep the position of color divs in the correct position during rotation).

https://www.loom.com/share/c7cab98155aa4f05a9a8f6319625fbc6

Everything changes when the navbar is fixed or sticky:
(as you can see the color divs go crazy during rotation)

https://www.loom.com/share/b43c6c51792f49a29a3d9582d9fffc4c

2 Likes

My bad, what you are talking about is right, I had never noticed that. It is weird but this is not a Webflow issue. This is a browser issue, I think we should report it on the browser.

By the way, anyone knows where is the best place to report such issues?