When building out your mobile design, you may be wanting to utilize some of the features that will allow for images to fill the screen of a user's mobile 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 device's browser is designed. There is often a URL Search Bar that runs along the top or bottom, as well as toolbar at the bottom of the page. Both of these bars can automatically resize themselves as you scroll for convenience sake.

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

When you start scrolling down a page, the toolbars shrink or disappear altogether to give you as much of the screen as possible to view the page's content.

While this is a very intuitive feature, it can cause 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, change your Canvas Type to Normal. This causes this canvas to become static, so that it doesn't try to adjust to compensate for window size.

This might shrink the image to be smaller than you would like it to appear, so you can manually adjust your canvas height if you'd like.

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 instead set to Scroll With Page, the image shouldn't resize itself as the page scrolls.