(Действительно) длинное фоновое изображение не отображается на iPad Safari

Question

По некоторым неизвестным причинам iPad Safari не отображает очень длинное фоновое изображение.В в моем примере фоновое изображение имеет размер 1000 x 10000 пикселей.Этот же пример работает в любом браузере для настольных компьютеров, например, Safari, Firefox и т. Д.

Мне известно о background-repeat в CSS, но, к сожалению, он не применим в моем конкретном случае.

Answer 1

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

Максимальный размер для декодированного GIFИзображения PNG и TIFF составляют 3 мегапикселя для устройств с оперативной памятью менее 256 МБ и 5 мегапикселей для устройств с оперативной памятью, превышающей или превышающей 256 МБ.

То есть, убедитесь, что ширина * высота ≤ 3 *1024* 1024 для устройств с объемом оперативной памяти менее 256 МБ.Обратите внимание, что декодированный размер намного больше, чем кодированный размер изображения.

см .: Знайте ограничения ресурсов iOS

Answer 2

Вы можете достичь этого, используя несколько фоновых изображений.Нарежьте свой длинный JPEG в управляемые куски, которые соответствуют пределу, и затем используйте магию css3, чтобы объединить их все в один фон.вместе с этим:

background-image: url('../images/bg_ipad1.jpg'), url('../images/bg_ipad2.jpg'), url('../images/bg_ipad3.jpg'), url('../images/bg_ipad4.jpg');
background-position: center 0px, center 2048px, center 4096px, center 6144px;
background-size: auto auto;
background-repeat: no-repeat;

Загружается на iPad в полном разрешении.