Фоновое изображение не реагирует на сафари и хром

мой фон на моем div не загружается должным образом на iphone при использовании safari или chrome. он полностью реагирует в Mozilla, однако в safari и chrome он по-прежнему загружается как 100% ширина и 100% высота. это фоновое изображение div "секты". это мой HTML

  <div class="sect">


<H1>ALESH</h1>

<h2>This is me</h2>


<FORM METHOD="LINK" ACTION="Artbook.html">
<INPUT TYPE="submit" VALUE="explore my work" class="button1">
</FORM>



</div>

это мой CSS для ПК

 html, body {
 height: 100%;
 background-color: white;
 background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
     background-size: cover;

     }

 .sect {
 height: 100%;
 width: 100%;
 background-position: absolute;
 background: url("homepage/photos/b1.jpg") no-repeat center center      scroll;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;

 padding: 0;
 left: 0;
 Right: 0;
  margin: auto;
 top: -2px;
 overflow: hidden;

 }

У меня есть отдельный файл css для «максимальной ширины устройства: 480 пикселей». однако ничего не работает. Знайте, где может быть ошибка?

0
0
701
2

Ответы 2

У меня было что-то похожее: фоновое изображение некорректно отображалось в Safari и Safari для мобильных устройств.

Проблема в том

background-attachment: fixed

Это немного сложно для мобильных браузеров. Для меня я просто должен был оставить это в стороне.

Иногда позиционирование не доступно. Так что попробуйте без.

Может быть, вам пригодится:
Фиксированный фон на iOS

Надеюсь, это поможет.

Дополнительно:
Также нашел это в стеке об этой проблеме.

привет спасибо, но когда я добавил этот тег, он перестал работать даже в Mozilla :(

Ales Waloszek 31.10.2018 14:35

Не добавляйте эту строку. Вы добавили эту строку кода в свой CSS для тела. Оставь это. Просто используйте позиционирование / размер и высоту для div. В противном случае попробуйте ответы по данной ссылке

f.overflow 31.10.2018 14:40

поэтому я только что узнал, что это отображается неправильно только на моем iPhone 6s, мои друзья iPhone 6s показывают это нормально. ты знаешь, где могла быть ошибка?

Ales Waloszek 31.10.2018 17:02

добавить этот тег в тег заголовка

<meta name="viewport" content="width=device-width, initial-scale=1">

привет спасибо, но у меня в голове уже есть этот тег .. все равно не работает :(

Ales Waloszek 31.10.2018 14:33

Другие вопросы по теме