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

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

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

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

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

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

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

Вы можете достичь этого, используя несколько фоновых изображений. Нарисуйте длинный 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 при полном разрешении.

  • HTML5 Video tag не работает в Safari, iPhone и iPad
  • iOS 7 iPad Safari Пейзаж innerHeight / внешний дизайн макета
  • Как заставить Safari выполнять полную перезагрузку страницы, не используя мышь?
  • Вес шрифта становится легче на Mac / Safari
  • Safari / Chrome (Webkit) - Не удается скрыть вертикальную полосу прокрутки iframe
  • Есть ли какие-либо расширения или трюки, чтобы открыть несколько закрытых вкладок в Safari
  • Как заставить повторную визуализацию после преобразования WebKit 3D в Safari
  • Похоже, что Firefox и Safari на Mac не могут показать веб-страницу в полноэкранном режиме?
  • Как проверить AppleScript, если приложение запущено, без его запуска - с помощью утилиты osascript
  • Вызов jQuery .load () не выполняет JavaScript в загруженном HTML-файле
  • Как отключить ссылку на номер телефона в Mobile Safari?
  • Давайте будем гением компьютера.