android chrome上的背景图像“封面”空白答案

【问题标题】：background-image "cover" white space on android chromeandroid chrome上的背景图像“封面”空白
【发布时间】：2018-05-15 23:00:32
【问题描述】：

这个 bug 快把我逼疯了！

我有一个网站，我在 body 元素上放置了一个背景图像，并做了通常的不重复中心固定封面的东西，它在我尝试过的每个浏览器上看起来都很好，除了 android chrome，在 android chrome 上似乎给主页一些滚动，你可以显示几百像素高的空白。它适用于 chrome 桌面，甚至各种 android 开发工具模拟器。

这是我正在使用的 CSS -

body {
  background-color: transparent !important;
  background: url('../../images/pagesbackground.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  overflow: auto;
}

我也在 HTML 元素上尝试了相同的 css，但无济于事（在 body 和/或 html 元素上使用 height: 100vh / 100% 的组合）。我也试过取消背景附件固定，但是在其他页面上它不会向下滚动以获取向下扩展的内容。我正在使用引导程序和 Angular 将每个页面作为模板提供。这是为 ng-view 中的模板提供服务的 index.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Goldbee Dev</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="dist/styles/all.min.css">
  <link href='https://fonts.googleapis.com/css?family=Lobster|Roboto|Titillium+Web|Rock+Salt|Condiment|Mate+SC|Pacifico|Luckiest+Guy' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</head>
<body ng-app="app">


    <div ng-view></div>








<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="dist/scripts/all.min.js"></script>
</body>
</html>

我也尝试将背景图像制作为包含 ng-view 的 div 并做同样的事情但没有成功。有人有建议吗？

【问题讨论】：

标签： html css angularjs

【解决方案1】：

我现在使用的一个创可贴（因为该网站是实时的） - 我再次将它设为 HTML 元素的背景，并将高度设为 200%。它可以防止空白，但如果您现在向下滚动，它会向下滚动到很多空白区域。有没有办法防止在没有 JS 或 Jquery 的情况下在主页上滚动（我知道如何在其中编写代码，但正在寻找最简单的方法）。

【讨论】：