Comments 30
		position: sticky;
		position: -webkit-sticky;

На всякий случай замечу, что без префиксное свойство должно быть последним, поэтому правильнее будет переставить эти строки местами.
Увидев media (hover), хлопнул себя по лбу — блин, так всё просто, а я какие-то классы скриптом на боди вешаю.
Но посмотрев браузерную поддержку, обратно разочаровался (IE, FF и несколько более экзотических — мимо).
UFO landed and left these words here
Это всё равно не решает проблему до конца. Как ни крути, получится, что где-то либо нужный ховер отвалится, либо ненужный пролезет. Хотя, возможно, процент ошибок и снижается.
2. -webkit-text-size-adjust: none

Отключает масштабирование текста в горизонтальной ориентации.
Вот за это я бы руки отрывал. Часто текст слишком мелкий в портретной ориентации, поворачиваешь телефон горизонтально пытаясь сделать текст покрупнее, а он такой же мелкий. Иногда как бы издеваясь на долю секунды после поворота текст становится крупнее, а потом уменьшается. А в Reader Mode обычно половина контента отсутствует, или он вовсе не доступен.

Хотя бывает и хуже, например так :)
некоторые отключают ландшафтный режим вообще :)
Если в портретной ориентации слишком мелкий шрифт — то это недочет дизайна/верстки. И надо увеличивать шрифт, а не «заставлять» пользователей крутить телефон) Сайт должен быть удобен в любой ориентации.
Кому-то шрифт кажется слишком мелким, кому-то — слишком крупным, именно поэтому все браузеры испокон веков дают пользователю возможность самому выбрать оптимальный размер шрифта, а вебдизайнеру остаётся лишь использовать font-size:100%.
Вместо media (hover) который судя по MDN не поддерживается в стандартном браузере Android можно использовать min-device-width: 1280px, который применяет ховер к большей части десктопных браузеров (хотя теперь он помечен как deprecated). Либо сочетать эти два способа вместе.

Ну и забыли классику упомянуть: touch-action: manipulation (убирает задержку в 300ms на мобильных браузерах при таче)
-webkit-appearance убирает не только стили, но и стрелочку у выпадающего списка, стрелочки у полей типа «числа», иконку календарика у даты и тому подобное. В общем многие элементы которые относятся как Shadow DOM.
Так что осторожней с ним!

И поддерживается многими браузерами, со своими префиксами конечно.
За «4. Блок с position: fixed при скролле» большое спасибо, только по проекту эту пакость обсуждали, как увидел статью ))
4. Блок с position: fixed при скролле

height: calc(100% + 70px);
padding-bottom: 70px;


по моему так блок тоже будет за пределами экрана.
Будет за пределами… Но не будет прорисовываться во время скролла. Так что это не вариант =(

То, что «background-attachment: fixed» не работает — это ещё не так плохо. Гораздо хуже, что это свойство в сочетании с «background-size: cover» делает так, что фоновое изображение растягивается по размеру всей страницы, а не по размеру экрана.


В результате получается так:


Демо на CodePen


Оригинальное фоновое изображение

Оригинальное фоновое изображение


Настольный Safari

Настольный Safari


Мобильный Safari

Мобильный Safari


Приходится в CSS делать хаки для определения мобильного Safari и отключать для него «background-attachment: fixed».

Ещё бы актуальный способ «отключать» эластичный скролл.


Предыдущий уже не работает:


html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Попробуйте position:fixed; width: 100%; height: 100%, а скроллинг уже дла вложенного блока.

Этот хороший способ, ровно как и описанный мною, уже не работает.


Что же касается веб-приложений, то единственное, что можно сделать для предотвращения ужасающего скролла, при котором обнажается серый задний фон — это отслеживать любой touchmove и предотвращать его через event.preventDefault():


$(document).on('touchmove', function(event) {
    event.preventDefault();
});

Но такой способ подходит только для веб-приложений не требующих скролла.


Надеюсь, что неправ и упустил какой-то рабочий способ.

«Доктор, да я не о том, я о ступеньках...»

Прошу прощения, в первом комментарии не уточнил, что речь идёт о веб-приложениях. Проблемы с эластичным скроллом именно там.


И у вас в том числе

image

Нет, я именно про веб-приложение, которое устанавливается из Сафари через «Add to Home Screen». Так вот там теперь неубиваемый скролл.


В сообщении выше скрин установленного вашего $mol Demo с оттянутым экраном, где этот эластичный скролл во всей красе. К сожалению.

Не знаю актуально для вас или нет.
Использовал ваше решение, только выставил:
overflow: visible;

Эластичного скролла нет. Я использую WKWebView, встроенный в iOS. Решал проблему с серым выделением при нажатии на пустую область. Другие решения не помогли.

а что на счёт прокрутки контента под модальным окном? есть красивые решения?

-webkit-overflow-scrolling:touch;

Не используйте это свойство, если будете через JS добавлять что-то в такой контейнер. Он просто перестанет скроллится, есть бага на это bugs.webkit.org/show_bug.cgi?id=158342
Only those users with full accounts are able to leave comments. Log in, please.