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

Я использую position: fixed на своем сайте, чтобы исправить панель навигации в порту просмотра, точно так же, как синяя панель Facebook, но когда мы попробовали ее на мобильных/планшетных устройствах (с их низкой вычислительной мощностью), эта фиксированная панель дает очень плохой результат. на производительность, что делает очень плохой пользовательский опыт при прокрутке,

мы использовали очень хорошие статьи для улучшения прокрутки, и они действительно это сделали, например:

После множества модификаций, основанных на этих статьях, мы пришли к тому, что position: fixed — единственное исследование, которое нам осталось улучшить.

Сайт имеет сверхгладкую прокрутку, когда мы меняем его на position: absolute. Но с его исправлением прокрутка имеет очень плохой недостаток в том смысле, что может зависать браузер сафари на айпаде при прокрутке определенным образом, знали ли вы, как использовать position: fixed с хорошей производительностью на планшетах/мобильных устройствах ?


person AbdelHady    schedule 01.07.2013    source источник


Ответы (3)


Если ваши «планшетные/мобильные устройства», у которых есть проблемы с производительностью, имеют механизм Webkit, вы, вероятно, можете найти ответ здесь: Хромированная медленная прокрутка с элементами с фиксированным положением

Быстрый ответ: попробуйте добавить -webkit-transform: translateZ(0); в фиксированный блок.

person a.s.panchenko    schedule 04.09.2013
comment
Если у вас возникла проблема с нижним колонтитулом (позиция: исправлена) после использования -webkit-transform: translateZ(0); решает ее (по крайней мере, в Android ‹ 2.2). Спасибо!!! - person luigi7up; 14.02.2014

Чтобы получить плавную прокрутку на мобильном устройстве, также при наличии «position: absolute»,

вам нужно только добавить в Div атрибут css

-webkit-overflow-scrolling: touch;

person user2951807    schedule 23.06.2014
comment
Кажется, это немного повышает производительность, хотя дочерние элементы с position:fixed, похоже, имеют очень низкую производительность в мобильном сафари. - person HandyAndyShortStack; 12.03.2015
comment
Это решило мою проблему, когда мне нужен был div с height: 100% и position: fixed. Без этого прокрутка CSS была глючной, а с ним я золотой. - person Martyn Chamberlin; 29.06.2015

Теперь вы можете использовать position: sticky

person Martin Zvarík    schedule 24.07.2020
comment
Какова будет разница в производительности между 2? - person AbdelHady; 25.07.2020
comment
Липкий лучше всего... движения безупречны... посмотрите эту ТАБЛИЦУ на мобильном устройстве: genevo .com/cz/srovnani-detektoru ... если вы прокрутите по горизонтали, он закрепит левые столбцы - person Martin Zvarík; 25.07.2020