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.
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/
Conclusion
To fix background image jumping when the address bar hides iOS/Android/Mobile Chrome with CSS, we set the overflow property.