CSS背景在iOS中拉伸以填充高度，但滚动时有空白答案

【问题标题】：CSS background stretches to fill height in iOS but there is white space on scrollCSS背景在iOS中拉伸以填充高度，但滚动时有空白
【发布时间】：2023-05-13 11:22:01
【问题描述】：

这个 CSS 让我的背景在 iOS 中填充 100% 的屏幕高度，但有一个小问题 - 当你向下滚动时，最初是空白，然后当你松开手指并停止滚动时，背景图像“调整”并再次填充 100% 的屏幕高度。如果您继续滚动，该问题不会再次出现在同一页面上，只是第一次。有人可以帮忙吗？谢谢

#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 不适用于 position: fixed。另外，为什么你需要 position:fixed 开头？为什么不将背景设置为<body>？
我有一个 50x1000 像素的背景图像模式，我试图填充所有屏幕（iOS 和桌面）100% 宽度和 100% 高度，这是我填充 iOS 100% 高度的粗略解决方案
我的解决方案没有解决您的问题吗？
您的解决方案会填充 100% 的页面，而不是 iOS 上的 100% 的屏幕
如果您可以在 Jsfiddle 或其他中重现您的问题或链接到您的网站，那就太好了，因为问题可能不是来自 #background CSS 本身。

标签： html ios css background-image stretch

【解决方案1】：

这是因为您的 #background 元素设置为“跟随”窗口的高度：

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

但是，当您第一次将内容从460px 向下滚动到529px 时，Safari 中的window 会改变其大小：

从这些屏幕截图中可以看出，当网页加载时，window.innerHeight 等于 460px（在 iPhone5 上）。然后，当您在手指触摸屏幕时开始向下滚动页面时，window.innerHeight 会增加到529px，但内容尚未更新。只有当手指从屏幕上松开时，#background 元素才会更新为等于529px 的新窗口高度。

要解决此问题，您应该确保#background 元素比初始窗口高度高529-460 = 69px。或者#background 元素的高度恒定为529px（或更高）：

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

或

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

这是解决此问题的最终代码：

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

【讨论】：

【解决方案2】：

我刚刚解决了这个问题。对我来说，问题是当我的身体标签带有背景图像时显示空白，背景大小设置为覆盖。为了解决这个问题，我设置了：

background-size: 100vw 100vh;

然后将我遇到问题的媒体查询设置为

{background-size: cover;}

【讨论】：

【解决方案3】：

为什么不使用背景尺寸：封面。这样背景图像将始终填充其附加的 div 或 body 标签

【讨论】：

不...这是最明显的答案，但它不适用于 iOS。

【解决方案4】：

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

身体{ 背景尺寸：封面；

}

【讨论】：

【解决方案5】：

尝试在背景上使用视口单位

background-size: 100vw 100vh;

但首先将视口元标记添加到您的页面：

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

注意：

不完全支持 vw 和 vh 单位，请查看支持的浏览器here。

【讨论】：

"vh" 在 iOS 中（很快在 Android 中）有非常意外的行为，尤其是在 Safari 和 Chrome 之间，尽管它们使用相同的渲染器，但在滚动时移动的 UI 工具栏元素是导致问题的原因。你可以在这里阅读更多相关信息 - nicolas-hoizey.com/2015/02/…

【解决方案6】：

您可以通过使用较长的转换延迟来防止调整元素大小来解决此问题。

例如：

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

这样做的权衡是它可以防止调整元素的大小，包括设备旋转，但是如果这是一个问题，您可以使用一些 JS 来检测方向变化并重置高度。

【讨论】：

【解决方案7】：

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

【讨论】：