Исходные изображения CSS неправильно изменяются на iPad и iPhone.

Мое фоновое изображение моего сайта красиво изменяет размеры в Chrome и Safari, используя background-size: cover, но когда я иду тестировать свой сайт на ipad или iphone, фоновое изображение CSS действительно масштабируется и выглядит ужасно. Я прочитал много других вопросов, касающихся этого, и никто не решил мою проблему.

HTML

<div class="background"> 

</div><!--background-->

.background не имеет контейнера и имеет 100% ширину экрана.

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Ответ 1

У меня была такая же проблема, я использовал SCROLL вместо FIXED.

background-attachment:scroll;

Ответ 2

По-видимому, iPad Safari downsampling изображения выше порога 1024px. Я попытался использовать scroll вместо fixed, но это не удалось. Другие трюки также не работали для меня.

I решил это, разделив мое первоначально слишком большое изображение 1600 × 1600 на два изображения. Из-за этого я смог использовать два изображения размером 1024 пикселя и добился еще большей читаемости, чем раньше.

Возможно, обходной путь может работать и для вас.