Исправлены прокрутки фонового рисунка на странице iOS7

Ответ 1

Я попытаюсь найти некоторую ссылку, но мобильные браузеры заставят background: scroll, потому что перерисовка слишком дорога.

Ссылка:

CSS - Фоновые изображения не отображаются должным образом в мобильных браузерах

@PaulIrish также отметил это:

Фиксированные фоны имеют огромную стоимость перерисовки и снижение производительности прокрутки, что, я считаю, почему оно было отключено.

Есть способы обойти это, но.. но это не быстрое решение. Посмотрите на следующий вопрос и комментарий.

Android-флеш-приложение для Android/мобильных веб-сайтов: исправлено не работает?

Ответ 2

Я бы рекомендовал посмотреть в scrollr (https://github.com/Prinzhorn/skrollr). Это библиотека параллакса, позволяющая добиться такого же эффекта. Они также тщательно изучили проблемы с мобильными устройствами:

Несколько слов о том, почему это важная веха и почему другие не удалось: мобильные браузеры пытаются сэкономить батареи, где бы они ни находились. Именно поэтому мобильные браузеры задерживают выполнение JavaScript во время прокрутки. iOS, в частности, делает это очень агрессивно и полностью останавливает JavaScript. Короче говоря, причина, по которой многие библиотеки прокрутки либо не работают на мобильных устройствах, либо у них есть своя полоса прокрутки, которая является кошмаром юзабилити на рабочем столе. Это было важным требованием, в то время как я разработал skrollr, чтобы я не заставлял вас прокручивать то, как я этого хочу. skrollr на рабочем столе использует собственную полосу прокрутки, и вы можете прокручивать так, как хотите (клавиатура, мышь и т.д.).

Ты только что сказал мне, что он не работает на мобильном телефоне, но почему? Ответ прост. При использовании skrollr на мобильном телефоне вы фактически не просматриваете. При обнаружении мобильного браузера skrollr отключает собственную прокрутку и вместо этого прослушивает события касания и перемещает содержимое (более конкретный элемент # skrollr-body) с помощью преобразований CSS.

Вот пример классической реализации фона параллакса: http://prinzhorn.github.io/skrollr/examples/classic.html

На странице примера указан другой драгоценный камень:

Деградирует без JavaScript (может быть отключен на мобильных устройствах, не нарушая все).

Ответ 3

Вы также можете использовать Backstretch jquery.

Это не тяжело и хорошо работает на iOS 7.

Ответ 4

У меня было очень простое решение для этого, после борьбы со всеми методами исправления этого.

У меня была проблема с моими мобильными устройствами IOS.

css (рабочий стол)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Затем я перезаписываю его, когда медиа-запрос удаляет "фиксированный" в качестве фонового вложения.

css (мобильный)

@media (max-width: 767px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - присваивает этому свойству значение по умолчанию. Я думаю, потому что IOS не принимает "фиксированный", он возвращается к значению по умолчанию, которое он принимает, прокручивает.

Это работало для меня на каждом устройстве. Надеюсь, это поможет и другому.

Ответ 5

Я заметил проблему с фоновой привязкой при обновлении до iOS7. Я должен был исправить проблему с помощью Javascript, поскольку я не мог найти решение только с помощью CSS.

if (iosVersion >= 7) {
    $(document).scroll(function() {
        $('#background').css('background-position', '0px ' + $(document).scrollTop() + 'px');
    });
}

Ответ 6

Я искал и использовал основы из решения Prinzhorn на github. Спасибо, что работает отлично. У меня есть только одно фоновое изображение, которое отображается на каждом устройстве, кроме iPad, и теперь изображение с фоном-прикреплено = исправлено и размер фона изображения: обложка.