Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Избегайте position: fixed в мобильной разработке

Если вы много разрабатывали для обычных браузеров, то position: fixed было очень удобным стилем элемента. Что может быть лучше чем одной строкой прилепить менюшку к верхней или нижней границе окна? Не один сайт так был сделан и не один менеджер удовлетворён ^_^

position-fixed

Однако, не все так просто в мобильной разработке. Тут нужно быть внимательным, осторожным и держаться настороже – путь джедая во всей его красе.

Вначале position: fixed вообще игнорировался смартфонами. Считалось, что элементы установленные таким образом могут помешать пользователю, например закрыв часть контента. Однако, эти дикие времена уже в прошлом и смартфоны умеют распознавать фиксированную позицию.

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

Лечится это конечно либо отказом от фиксированной позиции, либо игрой с display: none и block, но об этом в следующий раз.

Поделиться:
comments powered by Disqus