CSS背景延伸到填充高度在iOS，但在滚动有空白 [英] CSS background stretches to fill height in iOS but there is white space on scroll
问题描述
这个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
}
这是因为您的 #background 元素设置为跟随窗口的高度：
#background {
...
position：fixed;
top：0;
bottom：0;
...
}
但是，窗口在第一次从 460px 向下滚动到 529px 时会更改其大小$ c>：
从这些屏幕截图中可以看到，当网页加载时， window.innerHeight 等于 460px （在iPhone5上）。然后，当你开始向下滚动页面，而你的手指触摸屏幕 window.innerHeight 增加到 529px 内容尚未更新。只有当手指从屏幕上释放时， #background 元素才会更新为新窗口高度，等于 529px
要解决这个问题，你应该确保 #background 元素高于初始窗口高度 529-460 = 69px 。或 #background 元素具有 529px （或更高）的常量高度：
#background {
...
position：fixed;
top：0;
bottom：-69px;
...
}
或
#background {
...
位置：fixed;
top：0;
/ *使用height而不是bottom * /
height：529px;
...
}
这是一个最终的代码， ：
<！doctype html&
< html>
< head>
< meta charset =utf-8>
< title>固定背景< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0/>
< link rel =stylesheethref =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>
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
}
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:
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>
这篇关于CSS背景延伸到填充高度在iOS，但在滚动有空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
