Page jumps up and down when scolling on mobile

I’m still working on that portfolio project. There is a problem on mobile. When I scroll the page up and down, after the scroll ends, the page just flicks up or down, depending on the direction. This only happens when you scroll to a different direction than before though, like scroll up, then scroll down. I think there is something to do with the viewport changing the height due to the URL bar from the chrome app hiding and showing.

Also, my navbar from bootstrap is weirdly hiding just a bit when I scroll up.

Here’s a video:
https://www.youtube.com/watch?v=uKR8UWvWXOQ

Here’s the code:
https://github.com/linck5/portfolio_website

Here’s the website:
http://www.felipemuller.xyz/portfolio/

I can confirm the navbar hiding, not noticing the jumping bug.

btw, impressive portfolio!

Thanks!

The jumping bug is really obvious in the video. See at second 20, when I scroll up, as soon as the scrolling animation ends, the page jumps back down a little.

Have any idea what could be causing the navbar to hide though?

Just a guess, I went through the code in inspector and just deleted things like crazy (javascript, libraries, everything) until it worked. Really crazy bug, never seen anything like it…

I think it is caused by #projects-section.row
Open it up in google dev tools, delete the row, and all of a sudden it works…
I’ll let you figure it all out, but part of the problem is that your row is not in a container.

Hope that helps…

1 Like

You were right, that was exactly the problem. I created a div to wrap the row, put container class on it, and now that bug doesn’t happen.

Does bootstrap requires all its components to be inside a container? I didn’t know that.

I’m still trying to figure out why the main problem happens though. I tested on another browser on my phone, and this browser doesn’t hide the url bar when you scroll up like chrome does, and probably because of that, that problem doesn’t happen. Have anyone experienced this problem before?

1 Like

I don’t believe so. I know it is required for the grid system, but other elements like forms, buttons, jumbotrons, don’t need it. Read the official Bootstrap documentation for whatever element you are using, it will tell you how to structure it and give you an example.

Hmm you’re right. I read it with more attention this time. The first thing they say about “thumbnails” which is the component I’m using in that section is “Extend Bootstrap’s grid system…” Then if you check the grid system page, they say “Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.”

I figured out exactly what the problem is (not the solution though):

I’m using “vh” unit for a lot of my vertical spacing in the page. What happen is that when you scroll up and down in chrome for android, it makes the address bar on the top hide or show, and this causes the viewport height to change, making my vertical spacings resize. But for some reason the spacings are resized only after the scroll animation ends or the user releases their finger from the screen.

If you still want to use vh in your code you can fix the scroll-jump by adding to “body”

height: 95vh;
max-height: 95vh;

your inner body will scroll but not the html, the address bar won’t hide so the content height will stay the same