background-attachment: исправлено не работает на iPad

Есть ли способ CSS/Modernizr, чтобы узнать, поддерживает ли браузер фоновое приложение: исправлено?background-attachment: исправлено не работает на iPad

Я использую фон размер & фонового крепление вместе

background-size:cover; 
background-attachment:fixed;

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

Я предпочитаю путь Modernizr (как новый тест).

Вы можете видеть, чтобы выпустить здесь 2 больших «параллакс» изображения (прокрутите вниз) - с классом CSS из:
«параллакс изображения 1», «параллакс изображения 2».

http://royalchef-yes.walla.co.il/

источник

2013-11-17 Elad Shechter

выглядит так, как показано на версиях 3.2 и выше http://caniuse.com/background-img-opts Я не думаю, что Modernizr проверит это. – Davidicus

У меня был аналогичный вопрос один раз: https://stackoverflow.com/q/36518845/5641669 – Johannes

Я нашел ответ на другой вопрос, так что я не уверен, если это работает, но это не помешает попробовать :)

#background_wrap { 
z-index: -1; 
position: fixed; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
background-size: 100%; 
background-image: url('xx.jpg'); 
background-attachment: fixed;}

И положить в

<body><div id="background_wrap"></div></body>

Источник: Using background-attachment:fixed in safari on the ipad

источник

2014-01-16 14:29:12

Я не могу сделать это с положением: исправлено –

Я недавно ударил головой об этой проблеме. У меня есть параллаксные полосы в дизайне, и пользователи iOS сообщают, что фоновые изображения в этих а) были ужасно искажены и б) не были параллаксами. У меня нет устройства iOS, поэтому мне пришлось работать с другими, чтобы отладить это, но похоже, что iOS целенаправленно отключает обновления прокрутки, такие как эффекты параллакса, и это происходит как в Chrome, так и в Safari.

Мне не удалось найти способ получить фон параллакса для работы в iOS (хотя я заметил, что есть некоторые SquareSpace и другие сайты, которые достигли эффекта, заменив их на масштабированные встроенные изображения, что было более сложным и временным что я хотел бы попробовать что-то, что должно просто работать). Поэтому вместо этого я решил просто отключить эффект параллакса для iOS, сбросив значение background-attachment для прокрутки этих элементов только на iOS. Поскольку Modernizr определяет функцию и не браузеры, я должен был использовать этот скрипт для обнаружения всех IOS устройств, а затем установить стиль CSS для переопределения фиксированного значения:

https://gist.github.com/jsoverson/4963116

Тогда мой CSS является:

.device-ios .parallax-strip { 
    background-attachment:scroll !important; 
}

Это не идеальный (это зависящий от устройства хак, и он понижает опыт), но, учитывая враждебность Apple к параллаксу на iOS (возможно, потому, что это влияет на производительность), я думаю, что смогу жить с ним.

Надеюсь, что это поможет кому-то еще.

источник

2017-10-06 18:59:35 ZAP

background-attachment: исправлено не работает на iPad

ответ

Смежные вопросы