Background Image Jumps When Address Bar Hides Ios/Android/Mobile Chrome

Background image jumps when address bar hides iOS/Android/Mobile Chrome

This issue is caused by the URL bars shrinking/sliding out of the way and changing the size of the #bg1 and #bg2 divs since they are 100% height and "fixed". Since the background image is set to "cover" it will adjust the image size/position as the containing area is larger.

Based on the responsive nature of the site, the background must scale. I entertain two possible solutions:

1) Set the #bg1, #bg2 height to 100vh. In theory, this an elegant solution. However, iOS has a vh bug (http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/). I attempted using a max-height to prevent the issue, but it remained.

2) The viewport size, when determined by Javascript, is not affected by the URL bar. Therefore, Javascript can be used to set a static height on the #bg1 and #bg2 based on the viewport size. This is not the best solution as it isn't pure CSS and there is a slight image jump on page load. However, it is the only viable solution I see considering iOS's "vh" bugs (which do not appear to be fixed in iOS 7).

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

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

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

On a side note, I've seen so many issues with these resizing URL bars in iOS and Android. I understand the purpose, but they really need to think through the strange functionality and havoc they bring to websites. The latest change, is you can no longer "hide" the URL bar on page load on iOS or Chrome using scroll tricks.

EDIT: While the above script works perfectly for keeping the background from resizing, it causes a noticeable gap when users scroll down. This is because it is keeping the background sized to 100% of the screen height minus the URL bar. If we add 60px to the height, as swiss suggests, this problem goes away. It does mean we don't get to see the bottom 60px of the background image when the URL bar is present, but it prevents users from ever seeing a gap.

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

Chrome for android hides address bar when scrolling, expands background image below footer

UPDATED

The direct answer for your question - there is a trick to correct 100vh device height according to appearing and collapsing browser panels. Took from here.

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
html {
height: 100%;
}

body {
background-position: center center;
background-size: auto;
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
font-family: 'Montserrat', sans-serif;
color: white;
}

a {
color: white;
}

a:hover {
text-decoration: none;
color: white;
}

#content-wrapper {
overflow-y: scroll;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}

#content-wrapper::-webkit-scrollbar {
display: none;
}

#top_navbar {
padding: 0;
}

.navbar-brand {
padding: 0;
}

#navbar_logo {
width: 15vw;
margin-right: 6vw;
margin-left: 0 !important;
}

.nav-link {
font-family: Arial, Helvetica, sans-serif;
font-size: 2vw;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #1b1b1b;
letter-spacing: 1px;
}

.nav-link:hover {
-webkit-text-fill-color: #1b1b1b;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}

.nav-item {
margin-left: 3vw;
margin-right: 3vw;
}

#bottom_footer,
#legal_documents {
background-color: #1b1b1b;
width: 100%;
position: absolute;
display: table;
bottom: 0;
text-align: center;
padding-top: 1%;
padding-bottom: .4%;
}

#legal_documents {
bottom: unset;
font-size: 10px;
padding-bottom: .6% !important;
}

#social_buttons::selection {
color: none;
background: none;
}

#social_buttons::-moz-selection {
color: none;
background: none;
}

#social_buttons a {
display: inline-block;
margin: 0 15px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

#bottom_footer a:hover,
#legal_documents a:hover {
opacity: 0.5;
}
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
<nav id="top_navbar" class="navbar navbar-expand-sm navbar-dark">
<a class="navbar-brand" href="" title="">
<img id="navbar_logo" src="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_items" aria-controls="navbar_items" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbar_items">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">LABEL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">LABEL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">LABEL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">LABEL</a>
</li>
</ul>
</div>
</nav>

<main id="content-wrapper" class="container-fluid">
</main>

<div id="bottom_footer">
<div id="social_buttons">
<a href="" class="facebook" title="Facebook" target="_blank"></a>
<a href="" class="twitter" title="Twitter" target="_blank"></a>
<a href="" class="instagram" title="Instagram" target="_blank"></a>
<a href="" class="snapchat" title="Snapchat" target="_blank"></a>
<a href="" class="youtube" title="YouTube" target="_blank"></a>
</div>
<div id="legal_documents">
<a href="" title="Privacy Policy" target="_blank">PRIVACY POLICY</a> |
<a href="" title="Terms and Conditions" target="_blank">TERMS AND CONDITIONS</a>
</div>
</div>

</body>

</html>

Background jumps when I scroll on Android mobile

Try setting the background-size to cover instead of 100% 100%:

body.custom-background {
background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/08/intro-bg1.jpg");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: cover;
}

Full page fixed background jumps when scrolling because of the bottom bar on mobile

Finally, I found a solution, here is my solution.

HTML

<body>
<div id="bg"></div>
CONTENT...
</body>

CSS

#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
transform: scale(1.0);
&:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("path");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
}

Background resizing on scrolling in mobile browser

The main culprit is the background-position:fixed as it was meant to size up to the browser screen (minus the address bar area)

The trick is in using a sticky background.

I tested the below code and it should not resize on scrolling down in the mobile browser

html,
body {
margin: 0;
width: 100%;
max-height: 100%;
max-width: 100%;
}

#header {
height: 50px;
width: 100%;
background: black;
}

#rest {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background: blue;
}

#content {
width: 50%;
z-index: 0;
grid-row: 1;
grid-column: 1;
margin: 0 auto;
background: yellow;
}

#sticky_back {
width: 100%;
height: 100vh;

grid-row: 1;
grid-column: 1;
position: sticky;
top: 0;
background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
</div>
</div>
</body>


Related Topics



Leave a reply



Submit