Why Does My Responsive Website's Background Image Jump When the Address Bar Hides on Mobile?

Background Image Jumps When Address Bar Hides on iOS/Android/Chrome Mobile

Responsive websites using Twitter Bootstrap often encounter an issue where the background image shifts or jumps when scrolling on iOS Safari, Android Browser, or Chrome for Android. This occurs due to the address bar resizing and altering the size of the background image container divs.

Causes and Solutions

The culprit lies in the use of fixed height (100%) and background-size: cover for the background divs. As the address bar shrinks, it changes the height of the containing elements, causing the background image to resize and reposition.

One potential solution is to set the height of the background divs to 100vh (viewport height). However, iOS has a vh bug that prevents this approach from working consistently.

Alternatively, a more reliable solution involves using JavaScript to set a static height on the background divs based on the viewport size. This approach avoids the buggy behavior and prevents image jumping during scrolling. The following code demonstrates this solution:

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

However, this method can introduce a gap when scrolling down. To mitigate this, it is recommended to add a buffer of 60px to the height, as suggested by swiss:

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

While this solution sacrifices visibility of some background content when the address bar is present, it prevents users from encountering any gaps or inconsistencies during scrolling.

The above is the detailed content of Why Does My Responsive Website's Background Image Jump When the Address Bar Hides on Mobile?. For more information, please follow other related articles on the PHP Chinese website!