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
How to Check If the Current Activity Has a Dialog in Front
Waiting Till the Async Task Finish Its Work
Remove Old and Add New Git in Android Studio
How to Remove the Black Bar Appearing At the Bottom
How to Scroll Scrollview to Bottom Programmatically in Android
Prevent Screen Rotation on Android
How to Remove the Unnecessary Top Padding of the Navigation View
How to Separate a Country Code from a Phone Number in Android
Adb Is Not Detecting My Android Device on Ubuntu
Android: Open a Pdf from My App Using the Built in Pdf Viewer
Sending Files Using Post With Httpurlconnection
How to Set Button Click Effect in Android
How to Send a Firebase Notification to All Devices Via Curl
Setting Webview to View Desktop Site and Not Mobile Site
How to Add a Library Project to Android Studio
How to Start Android Application on Device Boot
Load Video from Firebase Storage to Videoview
Illegalstateexception: Link Does Not Have a Navcontroller Set