iOS перемещает фоновое изображение при фиксированном позиционировании

Я хотел, чтобы мое фоновое изображение оставалось на том же месте. Поэтому я использовал

background-attachment:fixed; 

Когда я обнаружил, что iOS, по-видимому, не поддерживает это свойство, я решил поместить фиксированный фон div в DOM. Это действительно работает очень хорошо:

 #background { top:0; left:0; width:100%; height:100%; position:fixed; background-position:50% 0%; background-repeat:no-repeat; background-attachment:fixed; background-image:url("images/mark-bg.png"); } направо #background { top:0; left:0; width:100%; height:100%; position:fixed; background-position:50% 0%; background-repeat:no-repeat; background-attachment:fixed; background-image:url("images/mark-bg.png"); } 

На первый взгляд, это отлично работает и в iOS. Но потом я узнал, что Safari прокручивает DIV до того места, где он будет прокручиваться, если он не будет исправлен.

Теперь я спрашиваю себя: « Какого черта …?» « Я имею в виду … Почему iOS прокручивает элемент, который явно сказано, чтобы не делать этого?

Есть ли разумное решение?

Вот полная демоверсия

РЕДАКТИРОВАТЬ

Я только что узнал, что не элемент движется сам, а фоновое изображение движется …

2 Solutions collect form web for “iOS перемещает фоновое изображение при фиксированном позиционировании”

Я нашел довольно субоптимальное решение, но, по крайней мере, оно работает. Я больше не использую background-image в CSS, но помещаю img тег в div фона и фиксирую его абсолютным:

 #background img { top:0; left:0; right:0; bottom:0; position:absolute; } направо #background img { top:0; left:0; right:0; bottom:0; position:absolute; } 

Вот скрипка

К сожалению, абзац «это текст» больше не скрыт. Lucky, это просто для фона …

Кроме того, изображение больше не центрируется и не изменяется правильно: [

редактировать

Я добавил следующий CSS, чтобы зафиксировать позиционирование:

 #background img { margin-left:auto; margin-right:auto; } 

Ответ Джулиана был очень полезен для меня.

Он решил часть проблемы, которая заключалась в том, чтобы предотвратить прокрутку фонового изображения, заменив его статическим изображением в фиксированном положении div, избегая ошибочной интерпретации Safari «background-attachment: fixed».

Но это оставило меня с изображением, которое я не мог сосредоточить в области просмотра, так что центр изображения всегда находился в центре окна просмотра.

Обычно это фоновая позиция: 50% 50% и размер фона: обложка, но не тогда, когда у нас нет фонового изображения.

Поэтому я заменил внутренний <img> Джулиана на <div> имеющий аналогичные настройки.

Затем я добавил фоновое изображение и свойства к этому div, ЗА ИСКЛЮЧЕНИЕМ фонового вложения, которое я забыл.

Это привело к тому, что div занял весь видовой экран и был привязан к окну просмотра, и у него был полный дочерний div, и у этого дочернего div было статическое фоновое изображение, установленное в позиции 50% / 50% и обложке размера.

Прекрасно работает!

Мои внутренние стили div заключаются в следующем:

 #div_background > div { top: 0px; left: 0px; width: auto; height: auto; right: 0px; bottom: 0px; position: absolute; margin-left: auto; margin-right: auto; display: inline-block; background-image: url(/images/background.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } 

С родительскими стилями div следующим образом:

 #div_background { display: inline-block; position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; right: 0%; bottom: 0%; z-index: -1; background-color: #A0B4C8; } 

И HTML просто:

 <div id="div_background"><div></div></div> 

Я считаю это хакерским решением, но необходимым из-за ошибки Safari.

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

Спасибо, Джулиан!

  • Webview удаляет все пробелы до и после HTML-объекта
  • Открыть специальную ссылку в Safari от UIWebView
  • Баннеры смарт-приложений iOS 9 не возвращаются
  • html5 <audio> не работает на Safari IOS
  • Обходное ограничение по обходному пути ajax - jquery и / или iOS
  • Ошибка цвета шрифта Safari CSS
  • Предотвращать разрыв слов / обертывание слов в почтовом клиенте iOS
  • Objective-c: Как отображать теги html <img> как изображения в iOS без UIWebView
  • HTML-карты изображений, не работающие на iOS с 10.3
  • Как создать ссылку для всех мобильных устройств, которые открывают карты Google с маршрутом, начинающимся с текущего местоположения, определяющим данное место?
  • Номер типа ввода html5 с шаблоном регулярного выражения в мобильном
  • Interesting Posts

    В iOS7.1 UIButton установленный образ не работает?

    Почему всегда можно получить доступ к элементу .0 необязательного кортежа в Swift?

    .on («click») не работает на iOS

    Производительность: Quartz2D против OpenGL ES (GLKit)

    Попытка подключения к сети Multipeer пытается вставить нулевой объект из объектов

    Добавить постоянный символ в UITextField

    Разрыв строки в Localizable.strings для MFMailComposeViewController

    Получить список доступных точек беспроводного доступа

    Изменение размера UITextView при открытии клавиатуры с автоматическим расположением

    Обработчики завершения для Objective-C Swift

    Как получить обновления местоположения для iOS 7 и 8 Даже когда приложение приостановлено

    Как оживить NSLayoutConstraint в CAAnimationGroup

    Отправка 'NSNumber * __ strong' в параметр несовместимого типа 'CLLocationDegrees' (aka 'double')

    Пустые промежутки между элементами UITabBar?

    Сохранение и просмотр изображения в приложении ios

    PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.