фоновое изображение "обложка" пробел на андроиде хром - PullRequest
0 голосов
/ 16 мая 2018

эта ошибка сводит меня с ума!

У меня есть веб-сайт, на котором я разместил фоновое изображение на элементе тела и выполнил обычную неповторяющуюся центральную фиксированную обложку. Он отлично смотрится на каждом браузере, который я пробовал, за исключением 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;
}

Я пробовал этот же css на элементе HTML, но безрезультатно (с комбинацией высоты: 100vh / 100% как для элемента body, так и для элемента html). Я также попытался снять фоновое вложение-исправлено, но затем на других страницах не прокручивается вниз содержимое, которое расширяется вниз. Я использую bootstrap и Angular, чтобы служить каждой странице в качестве шаблона. Это index.html, который обслуживает шаблоны в представлении ng.

<!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>

Я также пытался просто сделать фоновое изображение div, который содержит ng-view и делал то же самое без успеха. У кого-нибудь есть предложения?

1 Ответ

0 голосов
/ 16 мая 2018

Одна полоса, которую я использовал на данный момент (поскольку сайт работает) - я снова сделал его фоном HTML-элемента и сделал высоту 200%.Он предотвращает пробелы, но прокручивается вниз во много пустых областей, если вы прокрутите вниз сейчас.Есть ли способ предотвратить прокрутку на домашней странице без JS или Jquery (я знаю, как кодировать в них, но ищу самый простой способ).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...