CSS и iOS Safari

[lipton_ice_tea]

спасибо! поправил!

[dom1n1k]

Увидев media (hover), хлопнул себя по лбу — блин, так всё просто, а я какие-то классы скриптом на боди вешаю.
Но посмотрев браузерную поддержку, обратно разочаровался (IE, FF и несколько более экзотических — мимо).

[lipton_ice_tea]

Да, с этими браузерами подстава) Изменил этот пункт. Спасибо!

[Fess_blaga]

@media not (hover)

Если не ошибаюсь, должно быть:

/* possible  hover:hover or hover:none*/
@media not (hover:hover)

[dom1n1k]

Это всё равно не решает проблему до конца. Как ни крути, получится, что где-то либо нужный ховер отвалится, либо ненужный пролезет. Хотя, возможно, процент ошибок и снижается.

[Goodkat]

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

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

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

Хотя бывает и хуже, например так :)

[lipton_ice_tea]

Если в портретной ориентации слишком мелкий шрифт — то это недочет дизайна/верстки. И надо увеличивать шрифт, а не «заставлять» пользователей крутить телефон) Сайт должен быть удобен в любой ориентации.

[Goodkat]

Кому-то шрифт кажется слишком мелким, кому-то — слишком крупным, именно поэтому все браузеры испокон веков дают пользователю возможность самому выбрать оптимальный размер шрифта, а вебдизайнеру остаётся лишь использовать font-size:100%.

[Legion21]

Да что-то iOS в последнее время сдает… все хуже и худе

[pm_wanderer]

Вместо media (hover) который судя по MDN не поддерживается в стандартном браузере Android можно использовать min-device-width: 1280px, который применяет ховер к большей части десктопных браузеров (хотя теперь он помечен как deprecated). Либо сочетать эти два способа вместе.

Ну и забыли классику упомянуть: touch-action: manipulation (убирает задержку в 300ms на мобильных браузерах при таче)

[stepmex]

-webkit-appearance убирает не только стили, но и стрелочку у выпадающего списка, стрелочки у полей типа «числа», иконку календарика у даты и тому подобное. В общем многие элементы которые относятся как Shadow DOM.
Так что осторожней с ним!

И поддерживается многими браузерами, со своими префиксами конечно.

[Helwig]

За «4. Блок с position: fixed при скролле» большое спасибо, только по проекту эту пакость обсуждали, как увидел статью ))

[lipton_ice_tea]

Пользуйтесь на здоровье! ;)

[Suliman]

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

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

по моему так блок тоже будет за пределами экрана.

[lipton_ice_tea]

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

[Finesse]

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

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

Демо на CodePen

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

Настольный Safari

Мобильный Safari

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

[anotherjohndoe]

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

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

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

[vintage]

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

[anotherjohndoe]

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

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

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

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

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

[vintage]

У нас всё прекрасно работает.

[anotherjohndoe]

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

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

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

[vintage]

Так и у нас веб приложение. Или вы про Кордову? Там отдельный параметр надо в config.xml добавить.

[anotherjohndoe]

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

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

[Piradius]

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

overflow: visible;

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

[lipton_ice_tea]

что бы эластичный скролл работал, нужно ставить либо overflow: auto либо overflow: scroll

[anotherjohndoe]

Промахнулся с ответом.

[demimurych]

Предложил бы кто-нибудь вменяемый фикс для vh в ios safari

[sinneren]

height: 100vh;
/* autoprefixer: off */
height: -webkit-fill-available;

[alinkkkos]

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

[wanhelsing]

-webkit-overflow-scrolling:touch;

Не используйте это свойство, если будете через JS добавлять что-то в такой контейнер. Он просто перестанет скроллится, есть бага на это bugs.webkit.org/show_bug.cgi?id=158342