CSS 背景进行拉伸以填充高度 iOS 中存在但在卷轴上还有白色的空间

标签: ios HTML CSS
发布时间: 2017/3/23 3:01:38
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

这个 CSS 获取我的背景填充 100%的屏幕高度在 iOS 中,但还有一个小问题-当您滚动下来那里最初为空白,然后当你释放你的手指和停止滚动时的背景图像"调整",并且再次写满 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
}

解决方法 1:

发生这种情况是因为您 #background 元素设置为"跟随"窗口的高度︰

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

但是, window 在 Safari 中更改它的大小当您滚动内容第一次从 460px529px :

enter image description here enter image description here enter image description here

当加载该 web 页时,从这些截图,可以看到 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>
官方微信
官方QQ群
31647020