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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

Например, я нарезал изображение с высоким разрешением 7400 пикселей в 2048 пикселей и разместил их вместе с этим:

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 при полном разрешении.