0

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.

enter image description here

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

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;}
Ethan
  • 881
  • 8
  • 14
  • 26
OndrejHj04
  • 320
  • 2
  • 12

1 Answers1

1

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 class="flex">
  ...
</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";
 
} */
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • Hi. TY for a response. It is a pity but it doesn't work. It is strange because 100vh should count with the search bar. I have tried also wild things like height 4000px on HTML tag, also without success. Do you have any other ideas? – OndrejHj04 Apr 24 '22 at 18:21
  • Side note_1: style {{height: height}} is a react state which is connected to useEffect that sets state to window.innerHeight. That is also an approach that failed – OndrejHj04 Apr 24 '22 at 18:23
  • @OndrejHj04, please check my second suggestion above ... and thank you for the the react tip. Not my strong suit ;) – David Taiaroa Apr 24 '22 at 20:35
  • Hello. I have hosted your solution from code-pen to access it on the mobile device on URL dog.borec.cz. Feel free to try it on your phone. For mine, Sony Xperia XA1 Ultra (G3221) am I still facing this horrible issue. Big thank you for your help and please try it on your phone and let me know the result. – OndrejHj04 Apr 25 '22 at 05:17
  • Hi! for me on an iPhone + Chrome, the link you posted looks good and I'm not seeing the issue at the bottom. Here's a screenshot of what I see when I scroll to the end of the page: https://drive.google.com/file/d/1ZD4vAehExKPnw1NBJFX3Gp-qUzp7R4Re/view?usp=sharing I don't have another phone to test with to try and narrow things down some more. – David Taiaroa Apr 25 '22 at 14:11
  • Hi. Great that it is working on your phone. I think we can end up this with the conclusion that my phone is facing some strange issue :D. I would like to say a big thank you for helping me. Design && especially responsivity is not my cup of coffee and it is great that there are people who can help me. Happy hacking! – OndrejHj04 Apr 25 '22 at 19:06
  • Thank you @OndrejHj04, if you have the chance, check your hosted solution with other phones or other browsers.This might help explain some things. Good luck with your project! – David Taiaroa Apr 25 '22 at 19:44