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 с фоновым изображением.

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

  • Как получить перенаправленный URL-адрес
  • Bootstrap's .table-responsive предотвращает вертикальную прокрутку на iOS Safari
  • Titanium Пустое приложение немедленно выдает симулятор
  • Множественная выборка для мобильного Safari
  • Должен ли значок касания Apple находиться в корневой папке?
  • Как установить номер телефона с расширением в iPhone Webapp?
  • Панель навигации Bootstrap слишком короткая на страницах со столом
  • WebApp в HTML-загрузке в iOS 6.1.3 неправильный путь
  • Размер фона на iOS
  • iOS 10: неопределенное замораживание во время прокрутки списка HTML в стиле -webkit-overflow-scrolling: touch
  • Разметка Safari iOS7 разбивается на изменение ориентации, если вход ориентирован
  • Interesting Posts

    Как перезагрузить UIBarButtonItem в IOS

    Как реализовать анимацию shake для UITableViewCell

    Как можно десериализовать escape-строку JSON с помощью NSJSONSerialization?

    загрузить выбранное изображение в объективе-c

    UITableViewCell detailTextLabel исчезает при прокрутке

    Изменение направления вывода на iOS-карте

    Testflight не работает на iOS8

    RxSwift Как добавить «очистить все» UIButton к простому примеру таблицы

    Чтение файла по строкам в iOS SDK

    Как определить, является ли конкретная дата летним временем или нет?

    Как разместить любой вид ниже любого другого представления, которое получает его позицию от кода

    Можете ли вы определить тип устройства, подключенного к разъему для наушников iphone / ipad / ipod?

    Общие UserDefaults между приложением и добавлением не работают правильно

    Жест с помощью AVPlayer

    Как графические процессоры PowerVR предоставляют буфер глубины?

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