How to fix background image jumping when the address bar hides iOS/Android/Mobile Chrome with CSS?

Spread the love

Sometimes, we want to fix background image jumping when the address bar hides iOS/Android/Mobile Chrome with CSS.

In this article, we’ll look at how to fix background image jumping when the address bar hides iOS/Android/Mobile Chrome with CSS.

To fix background image jumping when the address bar hides iOS/Android/Mobile Chrome with CSS, we set the overflow property.

For instance, we write

html {
  overflow: hidden;
}

body {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

to hide the overflow in the html element to stop the background image from jumping.

Then we let users scroll vertically when there’s overflow content with overflow-y: scroll; on the body element/

To fix background image jumping when the address bar hides iOS/Android/Mobile Chrome with CSS, we set the overflow property.