Hiding search bar on mobile device cause background image not to fully stretch and creating white st-CodePudding

I know this problem is common and plenty of users have asked there for a solution and of course, I did read answers to these questions but nothing has helped for me.

This is how does the website look like when it is first rendered. All things are working just fine, the image is covering the whole page.

Then I try to scroll down and with an approximately 50% chance this is happening.

The scrollbar is hidden but the ugly white stripe appears at the bottom. When I stop scrolling the image stretches itself to the proper position. But the scrolling experience is ruined because of that white stripe.

Any helping hands for this?

<div className="flex" style={{height: height, minHeight: "576px" }}>
  ....
</div>

html { 
background: url(./bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

CodePudding user response：

Updated Suggestion:

Please check this second attempt: https://codepen.io/panchroma/pen/NWXVvbL

(or a preview link that will eventually expire: https://cdpn.io/pen/debug/NWXVvbL?authentication_hash=wQMPobNYVpdk )

the change is how the background image is added:

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(./bg.jpg)
    no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

The credit for this second suggestion belongs to Vincent background: fixed no repeat not working on mobile

Please note that my original solution below isn't a good solution because of how mobile devices handle fixed background images.

===========

How does this look for you?
https://codepen.io/panchroma/pen/RwxmVPY

It's forcing the HTML element to be 100vh. For illustration, I removed the styling on your .flex class, it's not needed to solve your image background question.

And I also added a viewport meta tag to the head of the page

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML

<div >
  ...
</div>

CSS

 html {
  background: url(./bg.jpg) no-repeat center center fixed;
    no-repeat center center fixed;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
height: 100vh; /* NEW */
}

/* .flex styling removed */
/* .flex{
  height: height, minHeight: "576px";
 
} */