在ios上滚动时固定背景上的白色区域 [英] White area on fixed background when scrolling on ios

查看：36 发布时间：2021/12/22 23:48:37 ios html css mobile background

本文介绍了在ios上滚动时固定背景上的白色区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的目标是在 iOS/Android 上有一个缩放的背景，在用户向下滚动(地址栏消失)后不必重新缩放.我发现了几个问题的有用答案，但不知何故，我的 iPhone 上一直有烦人的行为.我使用 Bootstrap.

这是我的简化 HTML

<身体><div id="background-img"></div><div id="layout" class="container"><div id="content-main" class="col-xs-12"><p>这里有一些文字</p>

这是我的 css

html {高度:100%；}身体 {位置:相对；/* 滚动监听需要 */字体系列:Arial、Helvetica、Sans-Serif；字体大小:30px；字体粗细:正常；高度:100%；白颜色;溢出:滚动；-webkit-overflow-scrolling:触摸；/* 在 ios 上平滑滚动 */}#background-img {宽度:100%；顶部:0；左:0；底部:-80px；位置:固定；z-索引:-1；背景: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") 无重复中心；背景尺寸:封面；}#content-main {//没什么特别的 }

在桌面上一切正常.但是当我在 ios(chrome 或 safari - 没有区别)上打开网站时，当我向下滚动时，屏幕底部会出现一个白条.当滚动停止时，该栏消失.您可以在移动设备上自己尝试:https://jsbin.com/rudetokoxu

我尝试了此处发布的解决方案:CSS 背景拉伸以填充 iOS 中的高度，但滚动上有空白.这里的解决方案似乎合乎逻辑.我什至尝试将背景 div 的高度设置为 200% 但无济于事.

也试过:移动 IOS 谷歌浏览器地址栏行为和这里:当地址栏隐藏iOS/Android时背景图片跳转/移动浏览器包括 js 解决方案(似乎其中一些不再适用，所以我没有尝试所有 js 解决方案)以及我能找到的关于该主题的任何其他内容

请帮我解决这个问题，或者说服我不要三思而后行，像这样的小事(因为生活充满了它们:-))

顺便说一句:这个网站在手机上也有同样的问题:http://www.laregiondesmusees.fr，但这个网站不受影响:http://www.heartkids.co.nz

解决方案

我感受到你的痛苦.如果您仔细查看没有空白问题的示例 (http://www.heartkids.co.nz) - 答案就在那里，但很难找到，除非您知道自己在寻找什么.

您会看到他们对背景图像应用了 2d 变换.在大多数情况下，在带有背景图像的固定 div 上应用 2d 或 3d 变换可以消除这样不需要的空白区域.

这个 CSS 应该删除那个烦人的白条.干杯.

.background-img {变换:translate3d(0,0,0);}

My aim is to have a scaled background on iOS/Android that doesn't have to rescale after user scrolls down (and the address bar disappears). I found several questions with useful answers but somehow I keep having annoying behaviour on my iPhone. I use Bootstrap.

Here's my simplified HTML

<html>
<body>
   <div id="background-img"></div>
   <div id="layout" class="container">
   <div id="content-main" class="col-xs-12">
      <p>Some text here</p>
   </div>
</div>
</body>
</html>

Here's my css

html {
  height: 100%; }

body {
  position: relative;
  /* required for scrollspy */
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 30px;
  font-weight: normal;
  height: 100%;
  color: white;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* smooth scrolling on ios */ }

#background-img {
  width: 100%;
  top: 0;
  left: 0;
  bottom: -80px;
  position: fixed;
  z-index: -1;
  background: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") no-repeat center center;
  background-size: cover;
}
#content-main { //nothing fancy }

Everything runs fine on desktop. But when I open the site on ios (chrome or safari - makes no difference) I get a white bar on the bottom of the screen when I scroll down. The bar disappears when scrolling has stopped. You can try it yourself on mobile at: https://jsbin.com/rudetokoxu

I tried solutions posted here: CSS background stretches to fill height in iOS but there is white space on scroll. Solution here seems logical. I even tried setting the height of the background div to 200% but to no avail.

Also tried: mobile IOS Google chrome address bar behaviour and here: Background image jumps when address bar hides iOS/Android/Mobile Chrome including the js solutions (it seemed that some of them did not work anymore so I did not try all the js solutions) and anything else I could find on the subject

Please help me solve this or convince me never to think twice about anoying little things like these (cos life is full of them :-) )

BTW: this site has the same problem on mobile: http://www.laregiondesmusees.fr, but this site does not suffer: http://www.heartkids.co.nz

解决方案

I feel your pain. If you look carefully at the example you found where there was no white space problem (http://www.heartkids.co.nz) - the answer was there, but hard to find unless you know what you are looking for.

You'll see they applied a 2d transform on the background image. In most cases applying either a 2d or a 3d transform on fixed divs with background images gets rid of unwanted white space like this.

This CSS should remove that annoying white bar. Cheers.

.background-img {
   transform: translate3d(0,0,0);  
}

这篇关于在ios上滚动时固定背景上的白色区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在ios上滚动时固定背景上的白色区域 [英] White area on fixed background when scrolling on ios

问题描述

相关文章

移动开发最新文章

热门教程

热门工具

登录关闭

在ios上滚动时固定背景上的白色区域 [英] White area on fixed background when scrolling on ios

问题描述

相关文章

移动开发最新文章

热门教程

热门工具

登录 关闭

登录关闭