Background attachment scroll не работает

CSS и iOS Safari

Доброго времени суток, дорогие хабрахабровцы!

Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!

Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.

Свойства

1. -webkit-overflow-scrolling: touch

Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.

2. -webkit-text-size-adjust: none

Отключает масштабирование текста в горизонтальной ориентации.

3. -webkit-tap-highlight-color: #ccc

Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.

Пример такого выделения:

4. -webkit-appearance: none

Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.

Применяется не только в верстке для Safari.

Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой тач. Таким образом, на тач-устройствах можно отключить лишние анимации, ненужные данным типам устройств.

Можно использовать не только в верстке для Safari.

Фиксы

1. background-attachment: fixed

Проблема: background-attachment: fixed не работает в iOS Safari.

Решение: Фиксировать не фон, а блок или псевдоэлемент.

2. Нежелательный скролл модального окна

Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.

Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.

3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.

Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.

Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js

К слову, значение sticky для свойства position сейчас поддерживается большим количеством браузеров, поэтому его можно использовать и в десктопных браузерах.

4. Блок с position: fixed при скролле

Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.

Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:

Решение: Нужно сделать следующий «трюк», используя transform.

Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.

Выводы

А выводов особо нет, просто пользуйтесь ) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!

Спасибо за внимание!

Update
В свойствах изменен пункт 5. Т.к. media (hover) имеет узкую поддержку. Спасибо dom1n1k за ценное замечание.

Источник

Background-attachment не работает на некоторых смартфонах и планшетах, это лечится?

День добрый! Дело в том что заметил прискорбную вещь — на некоторых смартфонах и планшетах, это свойство просто игнорируется — так же плохо работает background-size — к слову все устройства на которых плохо работает — на андроиде, кто нибудь пробовал это лечить??

3 ответа 3

Данное свойство в режиме fixed не поддерживается мобильными браузерами почти всеми. Вот спсиок кто поддерживает и кто частично: http://caniuse.com/#search=background-attachment

Нужно искать полифиллы на JavaScript. А так происходит потому-что при background-attachment:fixed; при скролле происходит перерисовка картинки что может снизить производительность сайта на мобильных устройствах.

К счастью есть плагин parallax.js который использует хитрость с абсолютным позиционированием http://pixelcog.github.io/parallax.js/

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html javascript css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.18.40487

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Background attachment scroll не работает

На данном примере показано свойство, background-color.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Вы должны видеть различные цвета фона, которые были установлены с помощью различных методов.

Источник

Background attachment scroll не работает

Полезная информация

Страницы: 1

№1 04-12-2006 14:27:04

ФФ не поддерживает стиль background-attachment: scroll; ?

Добрый день. А что ФФ не поддерживает стиль background-attachment: scroll;?
Насколько я понимаю, данный стиль указывает, что картинка бэкграунда должна «скроллиться», но в ФФ этого не происходит, в отличие от ИЕ.

Пример можно посмотреть тут:
http://www.kaankerede.by.ru/div.html

№2 04-12-2006 14:58:18

Re: ФФ не поддерживает стиль background-attachment: scroll; ?

Note that there is only one viewport per view. If an element has a scrolling mechanism (see ‘overflow’), a ‘fixed’ background doesn’t move with the element, and a ‘scroll’ background doesn’t move with the scrolling mechanism.

FF ведёт себя в соответствии с рекомендациями W3C.

Isn’t it ironic. don’t you think? — Alanis Morissette

№3 04-12-2006 18:34:00

Re: ФФ не поддерживает стиль background-attachment: scroll; ?

Ничего не понял. Честно говоря, я не пойму смысла этой фразы. Я конечно не силен в английском, но перевел так, что свойство такое есть, определено для всех элементов, но при наличии «a scrolling mechanism» прокрутка работать не будет. Так как его заставить прокручиваться в данном случае?

№4 04-12-2006 18:37:38

Re: ФФ не поддерживает стиль background-attachment: scroll; ?

Так как его заставить прокручиваться в данном случае?

Проще всего вложить внутрь ещё один блок и ему задать фон. Как-то так:

Isn’t it ironic. don’t you think? — Alanis Morissette

№5 04-12-2006 18:43:48

Re: ФФ не поддерживает стиль background-attachment: scroll; ?

Спасибо, попробую, но суть проблемы я так и не понял.

№6 04-12-2006 18:58:12

Re: ФФ не поддерживает стиль background-attachment: scroll; ?

Здесь background-attachment: fixed; фиксирует фон, не давая ему прокручиваться вместе с содержимым блока. Это поведение согласно стандартам W3C. Не вижу, в чем проблема, данную директиву IE и Fx понимают одинаково. background-attachment: scroll; это значение по умолчанию, оно должно приводить к прокрутке фона.

№7 05-12-2006 08:56:32

Re: ФФ не поддерживает стиль background-attachment: scroll; ?

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

Проблемы не видите, а заблуждаетесь точно так же как и я. Этот стиль определяет поведение фона не «вместе с содержимым блока» а с самим блоком. Т.е. если блок имеет механизм прокрутки и мы будем прокручивать содержимое блока, то фон всегда будет фиксированным, согласно рекомендациям W3C. И действие стиля background-attachment тут не определено, определяет же этот стиль поведение фона блока при движении самого блока. Т.е. если вы будете прокручивать содержимое некоего блока, в число которых входит блок с определенным стилем background-attachment, то его фон будет себя в соответствии со значением стиля.

Источник

Низкий FPS при прокрутке страницы. Решение проблемы background-attachment: fixed

Решил я тут недавно на одном из своих сайтов сделать легкий редизайн. И дошло дело до фона. Показался он мне каким-то скучным. Захотелось его немного «оживить». Подобрал подходящую картинку небольшого размера, загнал ее в свойство фона:

и довольный нажал F5. Красота, да и только!

Начал скроллить страничку вниз и чувствую, что-то не то…

Такое чувство, как будто я играю в Crysis на очень старом компьютере. Почему же на сайте начались «тормоза» и прокрутка проходит рывками?

Я начал свое расследование…

Сначала я погрешил на свойство cover , но дело оказалось не в нем. Отключив фиксированное положение фона (убрав fixed), мой «Crysis» выдал мне больше 30 FPS! «Во дела. », подумал я. Как же так? Почему? Почему я не замечал этого раньше? Возможно, это не очень заметно на легковесных сайтах, где не так много html элементов.

А дело оказалось вот в чем. Использование background-attachment : fixed каждый раз при прокрутке вызывает операцию перерисовки. Страница должна переместить свое содержимое. И когда дело доходит до фиксированного фона, браузер должен заново прорисовать картинку в новом месте, относительно существующих DOM-элементов.

Чтобы решить эту проблему, нашему фоновому изображению нужен свой элемент, чтобы оно могло двигаться независимо от других. А также нам понадобится CSS3-свойство will-change . О нем речь пойдет ниже.

Как только мы решим проблему с прорисовкой, скроллинг уже не будет проходить у нас рывками. Так как фон будет лежать на своем собственном слое, больше не потребуется перерисовывать страницу каждый раз при прокрутке.

Давайте я покажу все на примере.

Это наш изначальный код (я развернул свойства для наглядности):

А вот, что нам необходимо сделать для решения проблемы:

Мы добавили position: relative для элемента body , чтобы затем спозиционировать псевдо-элемент, который будет отдельным слоем для нашего фона. Остальные свойства, касательно фона, мы перенесли в ::before . У псевдо-элемента мы теперь используем position : fixed , вместо прежнего background-attachment: fixed у body . Ну и самое важное, без чего вся затея потерпит крах, — это свойство will-change.

Свойство will-change предписывает браузеру отображать элемент, независимо от окружающих его других элементов. Оно как бы говорит браузеру: «Эй, друг, этот элемент изменится когда-нибудь потом, в будущем, так что прорисуй его только один раз на его собственном слое. И не нужно учитывать остальные элементы — он сам по себе».

Данный билд я протестировал в разных браузерах, и вот небольшое резюме:

1. Google Chrome. Все ОК, работает как часы.
2. Mozilla Firefox. Все ОК, работает как часы.
3. Opera. Все ОК, работает как часы.
4. Safari. Все ОК, работает как часы. За проверку спасибо smssystem
5. Microsoft Edge. Метод работает, но есть один косяк. Если крутить колесиком, то дергается верх и низ страницы, но потом приходят в норму. Если же крутить с помощью скроллбара, то все ОК.
6. Internet Explorer. Та же проблема, что и у Edge.

Источник