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

Asked 30/3, 2014 at 6:47 Answered 8/8, 2017 at 12:29

Solved html ios css background-image stretch

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
}

Transponder answered 30/3, 2014 at 6:47 Comment(11)

iOS is not great with position: fixed. also, why do you need position:fixed to begin with? why not set the background to <body>? – Lauraine 30/3, 2014 at 6: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 – Transponder 30/3, 2014 at 6:57

Did my solution not solve your problem? – Lauraine 3/4, 2014 at 5:14

your solution fills 100% of the page, not 100% of the screen on iOS – Transponder 3/4, 2014 at 9:6

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. – Parris 3/4, 2014 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. – Baun 3/4, 2014 at 17:55

@cjspurg this is exactly my problem, can you give a coded solution? What approach did you end up using? – Transponder 3/4, 2014 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. :( – Baun 3/4, 2014 at 22:57

ok, height 150% didn't work for me, ive concluded its a mobile safari repainting issue like this #3485865, 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 – Transponder 3/4, 2014 at 23:16

The issue described in this post : #22717160 seems to reflect what you are describing. Maybe it can help. – Parris 4/4, 2014 at 10:45

try this link, might be you can get solution here.. #10629903 – Elfrieda 7/4, 2014 at 5:57

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;
    ...
}

#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>

Skean answered 7/4, 2014 at 22:4 Comment(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.

Fang answered 1/5, 2017 at 3:22 Comment(0)

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;}

Karmenkarna answered 8/8, 2017 at 12:29 Comment(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.

Olvera answered 3/4, 2014 at 12:55 Comment(1)

"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 - nicolas-hoizey.com/2015/02/… – Impromptu 25/8, 2017 at 15:50

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

Nisi answered 3/4, 2014 at 19:38 Comment(1)

Nope... this is the most obvious answer, but it doesn't work on iOS. – Sardonyx 10/7, 2017 at 10:13

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

body{ background-size: cover;

}

Boling answered 7/4, 2014 at 11:11 Comment(0)

-1

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

Lauraine answered 30/3, 2014 at 17:10 Comment(0)

Recommended topics

Hot tags