CSS fullscreen background shows whitebar at bottom when scrolling on mobile

Question

I have a website with a fullscreen background image.

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

This code works fine on most devices, but on some old Android devices, this causes a problem when scrolling down. Partially scrolling down, but not releasing your finger shows a white bar equal in size to the URL bar that is disappearing at the same time. Once you release your finger the background fixes itself.

This is what the image looks like mid-scroll.

Is there a way to make sure the background is always filling the page?

Edit: I have also tried adding a div with these properties:

#background {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
}

This shows the background but the same problem occurs.

@AsifSharifShahid Yes, I have. It has no effect since the content of the page always fills over 100% anyway. — Julian Lachniet, Dec 06 '20 at 19:17
Try [scroll-snap](https://css-tricks.com/practical-css-scroll-snapping/) to look it in place :) — myjobistobehappy, Dec 11 '20 at 05:20
@myjobistobehappy Could you explain how that property could be used to solve my problem? — Julian Lachniet, Dec 11 '20 at 23:06
Does the answers in this question help? https://stackoverflow.com/questions/28532327/background-attachmentfixed-not-working-android-chrome-v40 — sagar1025, Dec 16 '20 at 02:09
Try setting the `height` to 100% where you have `background` property — sagar1025, Dec 16 '20 at 02:11
does the `background-attachment` has to be `fixed`? have you tried removing or changing the different `background- attachment` values? — sagar1025, Dec 16 '20 at 19:24
@sagar1025 Changing that property fixes the problem but I'm trying to figure out how to avoid changing the layout. — Julian Lachniet, Dec 17 '20 at 00:12
I have found that it is the safari browser. You can do it on any page. — myjobistobehappy, Dec 17 '20 at 04:47

score 1 · Answer 1 · answered Dec 17 '20 at 22:13

Use -webkit-fill-available

https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/
I had a similar problem that I had to calculate the height of a body without safari toolbar. came up with this solution. Don't Know if its working for you too or not:

body { height: 100vh; height: calc(var(--vh, 1vh) * 100); }

score 0 · Answer 2 · answered Dec 06 '20 at 21:44

0

On IOS and newer Android devices, vh has been fixed so that 100vh is always the height between the bottom of the minimal top bar and the bottom of the screen.

In older devices this was not so, so vh changes when the user gets rid of some of the browsers top bars by scrolling.

This fixing was introduced to stop the phenomenon you are seeing, and potential ‘jumping’ in size of elements when scrolling. It has introduced another problem which is that not all your background will show when the user first enters the page.

In your case this isn’t noticeable because of the solid color for some distance at the bottom of your image. It would matter if there was text near the bottom.

You could perhaps get round your problem by having an absolutely placed element, or a pseudo element, which had the same background but at 100vh plus a bit. This might work, ie. it give a visible join, given the nature of your image.

Not a general solution though, I realise.

answered Dec 06 '20 at 21:44

A Haworth

30,908
4
11
14

1

I have tried adding the background as a fixed position
underneath the whole page. Even with that I still see the white bar.
– Julian Lachniet Dec 07 '20 at 00:01
1

I wasn’t thinking of fixed position, but absolute and with a larger height and extra to the code you already have, not instead of. What height did the extra div have?If that doesn’t do it, a pseudo element should. – A Haworth Dec 07 '20 at 00:17
I edited the question to show my code. I have the same problem there. I'm not sure what you mean by pseudo element, – Julian Lachniet Dec 08 '20 at 22:21
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements – isherwood Dec 08 '20 at 22:24
1

Is that any different that what the other answer suggested with `body::after`? It has the same problem as just adding a `
` to the body.
– Julian Lachniet Dec 09 '20 at 03:04
Yes it is different. The other answer constrains the size to 100vh height so you are going to have the same problem - the 100vh when you first enter the page is not as long as the 100vh once you have scrolled so it's not enough to use it. Also have you tried your site on an IOS device? IOS Safari does not support fixed in background attachment. I think you probably need to put up a working snippet which definitely shows the problem, using your background image, to see if we can reproduce it. – A Haworth Dec 09 '20 at 06:54
I did not try the fixed position on iOS. A live version of the site is at http://thirteenthofmarch.com/ with CS at https://thirteenthofmarch.com/css/app.css – Julian Lachniet Dec 10 '20 at 23:11

score 0 · Answer 3 · answered Dec 06 '20 at 22:25

0

You could try using a pseudo element, it might be a bit work do to, but it could potentially fix the issue, like so

html, body {
height: 100vh;
width: 100vw;
position: relative;
z-index: 2;
}

body::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url('/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 1;
}

answered Dec 06 '20 at 22:25

Vincenzo

375
3
15

1

I can't set the html and body to 100vh and 100vw without breaking the layout. – Julian Lachniet Dec 07 '20 at 00:02

myjobistobehappy · Answer 4 · 2020-12-17T05:04:40.813

0

I didn't know how to do this, so I looked it up. Safari has the tendency to do this on all websites, but you may be able to fix it for your case. I have found a few similar questions on Stack Overflow on how to fix it. I will present some of the solutions below:

Add a scroll class to your background

html,
body {
 height: 100%;
 margin: 0;
 overflow: hidden;
}
.scroll {
 overflow: auto;
 height: 100%;
}

Prevent overflow scrolling

html,
body {
 -webkit-overflow-scrolling: auto;
}

Using the iNoBounce Library

This library can be found here. This should be your last resort in the case that the other methods don't work. The owners have not released a new update since 2018, but for now it has worked through my tests. Happy Coding :)

edited Dec 17 '20 at 05:04

answered Dec 11 '20 at 05:24

myjobistobehappy

736
5
16

This does not make a difference. – Julian Lachniet Dec 11 '20 at 23:05
@JulianLachniet, hmm, I will look for another solution. – myjobistobehappy Dec 12 '20 at 02:03
@JulianLachniet, I made an update. Let me know how it goes. – myjobistobehappy Dec 17 '20 at 05:05

score 0 · Answer 5 · answered Dec 12 '20 at 14:52

0

Try this. It will make your background always filling the page

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;

  position: absolute;
}

answered Dec 12 '20 at 14:52

Josue Murhabazi

56
3

1

This breaks the layout of the page and does not solve the problem. – Julian Lachniet Dec 12 '20 at 17:39
2

never set the `position` of the `html` element to `absolute` – sagar1025 Dec 16 '20 at 19:13

score 0 · Answer 6 · answered Dec 16 '20 at 13:49

0

Did you try this:

html {
   min-height: 100vh;
}

This is suggested in the below link question, which seems is similar to your problem:

https://stackoverflow.com/a/47372972/6119844

answered Dec 16 '20 at 13:49

Mohamad Nateqi

26
1
3

score 0 · Answer 7 · answered Dec 17 '20 at 12:58

0

try this : 420 is a common mobile screen size. ??? is based on your elements height

@media screen and (max-width: 420px) {
  .sampleCSSclass {
    height: calc(100vh - ????px);
  }
}

answered Dec 17 '20 at 12:58

Ali Ansari

1
2

score 0 · Answer 8 · answered Dec 17 '20 at 15:08

0

If the scrollbar is totaly not used you can add oveflow hidden to body and no overflow will be vissible. Try to set margin and padding to 0

answered Dec 17 '20 at 15:08

score 0 · Answer 9 · answered Dec 17 '20 at 16:22

0

That's because of height: 100vh; You need to increase height. Maybe you should try height:100% or try min-height: 100vh;

answered Dec 17 '20 at 16:22

Dingus45191

532
1
7
19

did it help you – Dingus45191 Dec 19 '20 at 05:49

sven folkerts · Answer 10 · 2021-12-14T22:45:40.010

The issue is background-attachment: fixed; Things work fine if the image scrolls with the div it belongs to, but as soon as its fixed it takes up 100vh.

Ive been at this for longer then i'd like to admit and havent found a solution yet.

It seemingly just doesnt not want to listen to the actual div height; In my case, (using background-size: cover;) the innerHeight (100vh) reads 653px when the toolbar is active, and 709px when the toolbar disappears.

While typing this i did a simple test (on Firefox mobile:

So i used fixed height and auto width on the background image, using an image that has a simple red line at the bottom:

Using height: 653 - the red line in the image shows (obviously)
Using height 709 - the red line does not show when the toolbar disappears!

Which means that the pixels obstructed by the toolbar are just simply not being rendered when the toolbar disappears. Event though they should in my logic..

EDIT: I thought i had a solution: place a div behind the rest of the site that holds (and stacks if you have a background per section like i do) in a wrapper. Set this to absolute and use javascript to get the element's offset top (of which the background is supposed to belong to) and offset the background's "top" property to be equal the the div it belongs to. I tried using the offsetTop property to match the offsets, but havent made it work yet.

But theoretical, one could then use position sticky on the background images to mimic the position fixed effect without content jumps or the annoying (seeming) bug.

CSS fullscreen background shows whitebar at bottom when scrolling on mobile

10 Answers10

Add a scroll class to your background

Prevent overflow scrolling

Using the iNoBounce Library