background-size:cover 在 Chrome for Android 中留下空白答案

【问题标题】：background-size:cover leaves blank space in Chrome for Androidbackground-size:cover 在 Chrome for Android 中留下空白
【发布时间】：2012-11-23 03:25:10
【问题描述】：

我正在尝试为我的网站制作漂亮的全屏图像背景。它在我测试过的几乎所有浏览器 (browsershots.org) 中都能正常工作，但在我的 Android 平板电脑上的 Chrome 中却没有按预期工作。如您所见，背景中有很多白色，应该是所有图像。

链接： http://test.socie.nl

CSS：

body {
    background: url(../../images/background/image1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

意外结果：

【问题讨论】：

这是一个长镜头，但尝试将其添加到 html 元素而不是正文中，看看是否有帮助。
它在使用 Chrome 的 Android 4.3 手机上完美运行

标签： background fullscreen css cover

【解决方案1】：

这似乎是一个被 Android/Chrome 团队忽略的四年前的错误：

https://code.google.com/p/android/issues/detail?id=3301

http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo

我已经尝试了在这些链接和其他地方可以找到的所有解决方案；在 Android 4.3 Chrome 30 上都失败了。在 Android 2.3 本机浏览器上都失败了。

我要去的是：

.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
    }

（即 CSS 从 body 移出到一个名为“body”的类中），然后在我的 HTML 中：

<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>

（顺便说一句，您可以在那里看到将页脚保持在窗口底部的技术，似乎不会导致问题，因为在我的第一组实验中我已经将其剥离了。）

旁白：我很惊讶地看到 Firefox for Android 在 background-size:cover 上的行为也有问题。他们共享同一个渲染引擎吗？！

【讨论】：

您是说 .ftpush 中的内容修复了它吗？因为该 CSS 在纵向模式下的平板电脑上不起作用。
@NoBugs 这个解决方案是最好的。但是，在运行 Android 4.4 的 Nexus 7 上进行测试，它在纵向和横向上都运行良好。我还刚刚在 Android 2.3 股票浏览器上进行了快速测试，它实际上在纵向上运行得相当好（滚动时有点笨拙），但横向是错误的（在 OP 显示的方式中）。

【解决方案2】：

上面发布的方法有更新（如发布的here）。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

尽管进行了更新，但原始问题中的问题仍然存在。除了上述内容之外，对我有用的是向 html CSS 添加完整的宽度和高度：

html {
    width: 100%;
    height: 100%
}

【讨论】：

【解决方案3】：

通过添加以下内容解决：

html {
  height:100%;
  min-height:100%;
}

body {
   min-height:100%;
}

【讨论】：

【解决方案4】：

尝试使用<img> 代替背景图片：

HTML：

<img src="imagepath" id="your-id" />

CSS：

#your-id{
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}

【讨论】：

这是我尝试过的众多修复之一。在 Android 4.3 Chrome 30 上，它实际上在横向模式下工作。在纵向中，它与使用 background-size:cover 有相同的问题（实际上稍微更糟，因为它有时在滚动时跟不上）。顺便说一句，在 Android 2.3（本机浏览器）上，这个解决方案是最糟糕的。

【解决方案5】：

其实我只需要 如果您使用 html 标签是添加：

height: 100%;

...需要注意的是，当您将菜单栏滚动到视野之外时，图像仍然会调整大小，但我认为所有其他答案也存在这个问题。

【讨论】：