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

前端未结

关注

 7  1548

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 yo

相关标签:

7条回答

有刺的猬

2021-02-06 19:19

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

body{ background-size: cover;

}

0 讨论(0)
发布评论:

提交评论
- 加载中...
南方客

2021-02-06 19:19

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
感情败类

2021-02-06 19:20
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦毁少年i

2021-02-06 19:21

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>

0 讨论(0)

北恋

2021-02-06 19:27
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;}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

遥遥无期

2021-02-06 19:40

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

0 讨论(0)

1 2 下一页