Jumpy Mobile Scrolling
How to optimize a site that feel "jumpy" on mobile
Josh Ahles avatar
Written by Josh Ahles
Updated over a week ago

When building out your mobile site you may be wanting to utilize some of the features that will allow for images to fill the screen of a users device. While these make for a cool design, you may find that your site is very "jumpy" when scrolling, even though it looked great in the preview. Ultimately, this is due to the way a mobile devices browser is designed. The way the browser commonly works on mobile is that there is a URL search bar that runs along the top, as well as toolbar at the bottom of the page. These are both able to resize themselves based on if it thinks you are going to use those.

The Window Height when the page first loads is considered from the bottom of the search bar to the top of the toolbar

When you start scrolling down the page, the toolbar shrinks to give you as much of the screen as possible to view the content

While this is a very intuitive feature, it can make for some rough transitions when scrolling through canvases that are set to resize themselves. Since the canvas pictured is set to be Window Height, the canvas adjusts itself to be slightly larger when the page is scrolled to match the new window height. This is what results in the jumpy scrolling that is sometimes seen.

To fix that, you can set the canvas to be static with the canvas type being set to Normal. This might shrink the image smaller than you would like it to appear, and you can manually adjust that within the editor if you'd like.

(for larger image: Right Click>Open Image in New Tab)

Another setting that can cause this is if the image for the canvas is set to be a Canvas Background with a scroll setting set to Fixed. This locks the image into place on the window, which changes when scrolling down so the positioning of the image needs to change. If this is set to Scroll With Page, the image shouldn't resize itself as the page doesn't change sizes.

(for larger image: Right Click>Open Image in New Tab)

Did this answer your question?