滚动时，iPad 上的全屏背景会变成空白

Posted 2023-03-12

【中文标题】滚动时，iPad 上的全屏背景会变成空白

【英文标题】：Full screen background breaks into white spaces on iPad when scrolling

【发布时间】：2014-02-12 23:59:29

【问题描述】：

我遇到了背景图像无法正确显示的问题。页面加载时看起来不错，但是当您向下滚动页面时，每个 100% 宽度/高度面板 (div) 之间都会出现白色间隙。我已经阅读了许多其他有相同问题的问题，但他们没有任何答案，而我读过的那些建议通过将 overflow-x:hidden 添加到正文中来推荐，但是实际上适用于 iPhone 的 html 并不iPad..

我想知道是否有解决方案；这是我的 CSS；

.panel 
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 100%;
  font-family: FranklinGothicLTCom-BkCm, "Arial Narrow", sans-serif;
  overflow: hidden;
  border: none;
  margin: 0;

我将这个类添加到每个面板以获取基本规格，而面板 1、面板 2 等看起来像这样..

.panel2 
  background-color: #e16429;
  background: url(../img/home/background-panel01.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  z-index: 950 !important;

注意：这并没有给出横向的空白，而只是纵向，iPad 的纵向媒体查询下给出的类看起来像这样..

.panel2 
    background: url(../img/home/background-panel01.jpg) no-repeat center center;

这是我正在为进一步检查而工作的现场网站：http://bit.ly/1eGCShX

如果有人知道这个问题和解决方法，我感激不尽。我已经为此苦苦挣扎了一段时间。祝大家度过愉快的一周。

【参考方案1】：

我相信我可能已经通过在纵向 iPad 的媒体查询下的 div 类中添加 background-size:cover 来回答我自己的问题。

panel2 
     background: url(../img/home/background-panel01.jpg) no-repeat center center;
     -webkit-background-size: cover !important;
     background-size: cover !important;   
  

我认为 bg 封面会继承它的默认类，该类最初已经有背景大小的封面。我的第三个面板上现在确实有一个小边框，但主要问题是通过添加这个来解决的。