CSS background stretches to fill height in iOS but there is white space on scroll

Question

this CSS gets my background to fill 100% of the screen height in iOS but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time. Could someone please help? Thanks

#background {
  background: url(../img/background.jpg) center repeat-x;
  position: fixed;
  background-size: auto 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1
}

iOS is not great with `position: fixed`. also, why do you need position:fixed to begin with? why not set the background to ``? — Jakob Jingleheimer, Mar 30 '14 at 06:54
I have a 50x1000 px background image pattern that I am trying to get to fill all screens (iOS and desktops) 100% width and 100% height, this is my crude solution to filling iOS 100% height — user852974, Mar 30 '14 at 06:57
your solution fills 100% of the page, not 100% of the screen on iOS — user852974, Apr 03 '14 at 09:06
It would be great if you could reproduce your issue in Jsfiddle or other or link to your website because the problem might not come from the `#background` CSS itself. — web-tiki, Apr 03 '14 at 11:30
I recently had this problem and we ended up needing to make a tileable background image and give up on position:fixed. In iOS the window height shrinks for the bottom menu bar, then expands when you scroll and the browser doesn't repaint the background quickly enough. We also abandoned this approach because the fixed full-height background div produced content flickering and re-rendering in Android native and Firefox when you scroll. — cjspurgeon, Apr 03 '14 at 17:55
@cjspurg this is exactly my problem, can you give a coded solution? What approach did you end up using? — user852974, Apr 03 '14 at 21:58
We didn't use a fixed background, we ended up adding a background to the content wrapper that scrolled with the content. The iOS and Android issues both seemed inherent to the way those mobile browsers handle `position:fixed`. Aka: not well. For just the iOS issue you could try setting `#background { height: 150% }`, but as I recall we still had the white bar. Sorry. :( — cjspurgeon, Apr 03 '14 at 22:57
ok, height 150% didn't work for me, ive concluded its a mobile safari repainting issue like this http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes, would there be a javascript solution? to force webkit to repaint the div before i release my finger? thats really the problem, everything is ok after you release your finger on scroll, just not before — user852974, Apr 03 '14 at 23:16
The issue described in this post : http://stackoverflow.com/questions/22716660/how-can-i-remove-mysterious-white-space#comment34618145_22716660 seems to reflect what you are describing. Maybe it can help. — web-tiki, Apr 04 '14 at 10:45
try this link, might be you can get solution here.. http://stackoverflow.com/questions/10629403/ios-colorwithpatternimage-stretch-image-full-screen — G.L.P, Apr 07 '14 at 05:57

smnh · Accepted Answer · 2014-04-07T22:15:28.767

This happens because your #background element is set to "follow" the height of the window:

#background {
    ...
    position: fixed;
    top: 0;
    bottom: 0;
    ...
}

But, the window in Safari changes its size when you scroll down the content for the first time from 460px to 529px:

enter image description here

As you can see from these screenshots, when the web page is loaded the window.innerHeight is equal to 460px (on iPhone5). Then, when you begin scrolling the page down while your finger touches the screen the window.innerHeight is increased to 529px but the content is not yet updated. Only when the finger is released from the screen the #background element is updated with the new window height which equals to 529px.

To fix this issue you should make sure that the #background element is higher than the initial window height by 529-460 = 69px. Or the #background element has constant height of 529px (or higher):

#background {
    ...
    position: fixed;
    top: 0;
    bottom: -69px;
    ...
}

OR

#background {
    ...
    position: fixed;
    top: 0;
    /* use height instead of bottom */
    height: 529px;
    ...
}

Here is a final code that fixes this issue:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fixed background</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/styles.css?v=1.0">
        <style>
            #background {
                background: url(bkgd.png) repeat;
                position: fixed;
                background-size: 100% auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: -69px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div id="background"></div>
        <div style="height: 5000px;"></div>
    </body>
</html>

score 1 · Answer 2 · answered Aug 08 '17 at 12:29

I have just solved this issue. The problem for me was that the whitespace was showing when I had my body tag with a background-image, with the background-size set to cover. To fix this issue I set:

background-size: 100vw 100vh;

Then set the media query I was having the problem with to

{background-size: cover;}

Karim AG · Answer 3 · 2015-07-26T05:44:47.840

0

Try using viewport units on the background

background-size: 100vw 100vh;

But first add viewport meta tag to your page:

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

NOTE:

The vw and vh units are not fully supported, check out the supported browsers here.

edited Jul 26 '15 at 05:44

answered Apr 03 '14 at 12:55

Karim AG

2,166
15
29

"vh" has very unexpected behavior in iOS (and soon in Android) especially between Safari and Chrome despite them using the same renderer the UI toolbar elements that move around on-scroll is what causes the issue. You can read more about it here - https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html – mattacular Aug 25 '17 at 15:50

score 0 · Answer 4 · answered Apr 03 '14 at 19:38

0

Why not use background-size: cover. That way the background image will always fill its attached div or body tag

answered Apr 03 '14 at 19:38

fu8ar

140
1
9

Nope... this is the most obvious answer, but it doesn't work on iOS. – Mike Gledhill Jul 10 '17 at 10:13

score 0 · Answer 5 · answered Apr 07 '14 at 11:11

0

<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0," />

body{ background-size: cover;

}

answered Apr 07 '14 at 11:11

score 0 · Answer 6 · edited May 01 '17 at 03:44

0

You can fix this by using long transition delays to prevent the element resizing.

eg:

transition: height 250ms 600s; /*10min delay*/

The tradeoff with this is it prevents resizing of the element including on device rotating, however you could use some JS to detect orientationchange and reset the height if this was an issue.

edited May 01 '17 at 03:44

Devraj Gadhavi

3,541
3
38
67

answered May 01 '17 at 03:22

Chris Anderson

83
5

score -1 · Answer 7 · answered Mar 30 '14 at 17:10

html, body {
    display: block;
    height:  100%;
    width:   100%;
}

body {
    background-image:      url('some/image.jpg');
    background-repeat:     repeat-x;
    background-attachment: fixed;
    background-position:   center center;
    background-size:       contain;
}

jsfiddle

CSS background stretches to fill height in iOS but there is white space on scroll

7 Answers7

Linked