выполняет фоновые привязки фиксированной работы в iOS5?

17

Это работает в & gt; iOS 5?

.element {
    background: url(images/myImage.jpg) 50% 0 no-repeat fixed;
}

Я думал, что это так, но пока это не так.

    
задан Dylan 19.03.2012 в 23:59
источник
  • Каким образом он не работает (не фиксирован, нет фона и т. д.)? –  Connor 20.03.2012 в 00:03
  • Фоновое изображение не кажется фиксированным. Он прокручивает содержимое. –  Dylan 20.03.2012 в 00:12
  • Я удалил свой предыдущий комментарий, просто посмотри на мой ответ. –  Connor 20.03.2012 в 00:18
  • У меня такой же результат. Это странно. –  Dylan 20.03.2012 в 00:26
  • То же самое с моим ответом? –  Connor 20.03.2012 в 00:30
Показать остальные комментарии

3 ответа

13

В соответствии с этой матрицей поддержки фонового вложения , номер

Другое сообщение предполагает, что придумывание обходного пути для мобильных устройств устройств не стоит:

  

... и таймеры блокировки Android и iPhone или рендер во время прокрутки, поэтому   Эффект заключается в том, что divs перемещаются с прокрученной страницей и только после того,   в конце концов, divs возвращаются в ожидаемую позицию. Это противоречит фиксированной идее

    
ответ дан o.v. 20.03.2012 в 00:55
источник
  • Bummer, надеюсь, что это будет поддержано в ближайшее время. Я попробую другое свойство. –  Dylan 20.03.2012 в 16:38
27

Вы можете обойти это, используя отдельный элемент и position: fixed , который работает!

HTML:

<div id="Background"></div>

<div id="Content"></div>

CSS

#Background {
    background: #000 url("img/Background.jpg") no-repeat 50% 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}
    
ответ дан shshaw 12.11.2012 в 03:02
источник
  • Добавьте это на #Background: z-index: -1; –  Jeff 12.03.2013 в 09:34
  • Не знаю, почему это не было рассмотрено до сих пор - это правильный способ справиться с этой проблемой, стоит упомянуть здесь, что фоновая привязка не может быть изменена, ОДНАКО правильный способ получить желаемый результат < img id="bg-img" src="foo.jpg" /> с # bg-img {position: fixed} –  Brian 18.04.2013 в 19:16
  • @Brian Семантически, конечно; если это изображение, используйте тег изображения. Однако есть несколько преимуществ использования фонового изображения. Установив верхнее, нижнее, левое и правое свойства, мы гарантируем, что весь видовой экран покрыт элементом #Background, но само изображение не будет растянуто. Затем вы можете использовать background-position для выравнивания изображения в правом нижнем углу (при желании) и размера фона, чтобы масштабировать изображение до окна просмотра. –  shshaw 18.04.2013 в 23:33
  • @shshaw, естественно, вы правы, но я хотел сказать, что, хотя есть некоторые различия, 99% случаев использования для фиксированного позиционирования, ищущих позиционирование фонового изображения, могут быть достигнуты с помощью хорошо закодированной позиции - фиксированное изображение (которое работает на iOS, в отличие от background-position / attachment). –  Brian 20.04.2013 в 06:22
  • @ user852974 «lag» на самом деле Mobile Safari не освежает ничего с позицией: фиксируется до тех пор, пока прокрутка не остановится. То же самое с фактическими значениями window.scrollTop, по крайней мере в более старых версиях. remysharp.com/2012/05/24/... В iOS7, похоже, фиксированные позиции на месте, если прокрутка ниже определенной скорости. Если пользователь быстро проведет поиск, элемент снова появится, как только импульс остановится. –  shshaw 31.03.2014 в 18:27
Показать остальные комментарии
0

С фиксированной позицией на мобильных и сенсорных устройствах слишком много проблем.

До тех пор, пока фон не анимируется каким-либо образом (размытие, css переходит на любой JS) И, как только нет полосы прокрутки, она может использоваться и согласована.

Все остальное будет - в зависимости от браузера - приведет к нежелательным результатам, пикселизации изображения, масштабированию изображений в 100 раз на устройствах IOS, «прыгающим» div и т. д.

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

Он выглядит достаточно хорошо, я думаю, и никаких плагинов не требуется.

    
ответ дан damiano celent 05.10.2015 в 21:17
источник