Если карта закрывает форму на телефоне, пользователь не может ввести адрес, выбрать пункт или завершить заказ. На компьютере интерфейс при этом часто выглядит нормально, потому что ошибка проявляется только при узком viewport, прокрутке, открытии экранной клавиатуры или касании интерактивной карты.

Исправление начинается не с увеличения z-index формы. Сначала нужно определить, какой элемент создает перекрытие и почему мобильная компоновка оставляет карту поверх нужных полей.

Зафиксируйте сценарий, в котором возникает ошибка

  • Модель устройства, браузер и ориентация экрана.
  • Ширина и высота viewport в момент ошибки.
  • Появляется ли перекрытие сразу или после прокрутки.
  • Меняется ли интерфейс после открытия клавиатуры.
  • Какая карта используется: Яндекс, Google, Leaflet или другой SDK.
  • На каком шаге формы это происходит и можно ли завершить действие.
  • Возникает ли проблема внутри модального окна, iframe или обычной страницы.

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

Проверьте реальный viewport

На мобильном экране доступная высота меняется из-за адресной строки браузера, нижней панели и экранной клавиатуры. Жестко заданные 100vh не всегда соответствуют видимой области. Контейнер карты может оказаться выше экрана и вытеснить или закрыть форму.

  • В документе присутствует корректный meta viewport.
  • Высота карты на телефоне ограничена разумным min-height и max-height.
  • Для полноэкранных состояний проверены современные единицы dvh и svh.
  • Контент не зависит только от фиксированной высоты в пикселях.
  • После изменения ориентации размеры карты пересчитываются.
  • Открытие клавиатуры не оставляет кнопку отправки за пределами доступной области.

Найдите элемент, который действительно находится сверху

Откройте удаленную отладку мобильного браузера или режим устройства в DevTools. Выберите область перекрытия и посмотрите computed styles. Важно проверить не только карту, но и ее внутренние canvas, iframe, controls и служебные панели.

  • position: fixed, sticky или absolute;
  • z-index и ближайший stacking context;
  • transform, filter, opacity и isolation у родителей;
  • overflow: hidden или clip на контейнерах;
  • pointer-events у визуально прозрачных слоев;
  • отрицательные margin и translate;
  • внутренние элементы SDK с собственными z-index.

Почему большой z-index может не помочь

z-index сравнивается внутри stacking context. Если форма находится в родителе с меньшим уровнем, значение 999999 у самой формы не поднимет ее выше карты из соседнего контекста. Новый контекст создают, например, transform, opacity меньше единицы, filter, isolation и некоторые варианты position.

Сравните уровни общих родителей формы и карты. Часто правильнее убрать лишний stacking context или расположить оба блока в одной предсказуемой системе слоев, чем бесконечно увеличивать числа.

На мобильном лучше менять компоновку, а не только слои

Двухколоночный desktop-блок «форма + карта» обычно нужно перестроить в одну колонку. Пользователь сначала вводит адрес и параметры, затем видит карту или открывает ее по отдельной кнопке. Это уменьшает конкуренцию за небольшой экран.

  • Форма располагается выше карты в DOM и визуальном порядке.
  • Карта получает ограниченную высоту, например как самостоятельный шаг.
  • Основная кнопка остается доступной после выбора точки.
  • Подсказки адреса не обрезаются контейнером карты.
  • Интерактивная карта не начинается прямо под полем, где пользователь прокручивает страницу.

Выберите подходящий мобильный паттерн

Карта после формы

Подходит, если карта помогает проверить адрес, но не является главным инструментом. Форма остается обычной частью страницы, а карта выводится ниже выбранного адреса.

Карта отдельным шагом

Подходит для пунктов выдачи и точного выбора координат. Пользователь нажимает «Выбрать на карте», открывает полноэкранный режим, подтверждает точку и возвращается к форме с заполненным значением.

Bottom sheet поверх карты

Подходит, когда карта является основной сценой. Нижняя панель должна иметь ограниченные состояния, заметный handle, безопасную область, доступную кнопку и корректное поведение с клавиатурой. Случайный div с position fixed обычно недостаточен.

Не позволяйте карте перехватывать прокрутку страницы

На маленьком экране карта может занимать почти всю высоту и забирать жесты перемещения. Пользователь пытается прокрутить страницу к кнопке, но двигает карту. Это воспринимается как заблокированная форма даже без визуального перекрытия.

  • Не делайте карту выше доступного экрана без отдельного режима.
  • Рассмотрите включение взаимодействия после явного касания или кнопки.
  • Оставляйте вокруг карты область, за которую можно прокрутить страницу.
  • Настройте жесты SDK по рекомендациям поставщика карты.
  • Не блокируйте touchmove на всем document.
  • Проверьте поведение одним пальцем и масштабирование двумя.

Проверьте pointer-events

Иногда прозрачный слой карты лежит поверх формы и перехватывает касания, хотя визуально поля видны. В DevTools временно отключите pointer-events у подозрительного слоя. Если форма начинает работать, найдите точную границу интерактивной области.

Не ставьте pointer-events: none на всю карту как постоянное исправление, если пользователю нужно выбирать точку. Ограничьте неиспользуемый overlay или включайте интерактивность карты по явному действию.

Учтите экранную клавиатуру

При фокусе в поле адреса клавиатура уменьшает видимую часть страницы. Fixed-карта или bottom sheet могут остаться рассчитанными по старой высоте и закрыть поле либо кнопку.

  • Активное поле прокручивается в видимую область.
  • Фиксированная панель не перекрывает нижнюю часть формы.
  • Высота модального окна реагирует на visual viewport.
  • Список адресных подсказок виден над клавиатурой.
  • После закрытия клавиатуры карта получает правильный размер.
  • Фокус не теряется из-за ненужного повторного рендера компонента.

Проверьте модальное окно с картой

Если карта открывается в modal, порядок слоев должен быть зафиксирован: backdrop, окно, внутренние dropdown и системные controls. Контейнер модального окна должен прокручиваться, а background страницы — оставаться неподвижным без скачка ширины.

  • Modal помещен ближе к корню документа, а не внутрь трансформированного блока.
  • Backdrop не расположен поверх содержимого окна.
  • Адресные подсказки имеют правильный слой и не обрезаются overflow.
  • Кнопка закрытия доступна с клавиатуры и screen reader.
  • После закрытия фокус возвращается на кнопку открытия.
  • Карта уничтожается или переиспользуется без накопления обработчиков.

Пересчитайте размер карты после изменения контейнера

Карта, созданная в скрытом блоке или до завершения responsive-перестройки, может получить нулевые или старые размеры. После открытия modal, смены шага, ориентации или ширины вызовите штатный метод invalidateSize, resize или аналог выбранного SDK.

Не запускайте пересчет в бесконечном resize-цикле. Используйте ResizeObserver или ограниченный обработчик, проверяйте изменение фактических размеров и удаляйте listener при уничтожении компонента.

Учтите safe area на iPhone

Полноэкранная карта и нижняя кнопка могут попасть под индикатор Home или системные панели. Добавьте внутренние отступы с учетом safe-area-inset, особенно для fixed и sticky элементов. Это не должно заменять обычный padding на устройствах без вырезов.

Сохраните выбранное значение отдельно от карты

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

  • В форме явно видно выбранный адрес или пункт.
  • Координаты валидируются на сервере вместе с остальными полями.
  • Повторное открытие карты показывает сохраненную точку.
  • Изменение текста адреса корректно сбрасывает устаревшие координаты.
  • Ошибку загрузки SDK можно обойти ручным вводом, если бизнес-процесс это допускает.

Проверьте доступность формы

Выбор на карте не должен быть единственным способом указать адрес. Поля имеют label, ошибки связаны с ними программно, а кнопки доступны с клавиатуры. Для пункта выдачи полезен альтернативный список с названием, адресом и режимом работы.

Как проверить исправление

  1. Откройте страницу на ширинах 320, 360, 390 и 430 пикселей.
  2. Проверьте Android Chrome и iOS Safari на реальных устройствах.
  3. Пройдите форму с пустыми полями, ошибками и длинным адресом.
  4. Откройте и закройте клавиатуру несколько раз.
  5. Смените ориентацию и вернитесь обратно.
  6. Проверьте прокрутку страницы рядом с картой и жесты внутри нее.
  7. Выберите точку, вернитесь в форму и отправьте данные.
  8. Повторите сценарий при медленной загрузке карты и при ошибке SDK.

Типичные неправильные исправления

  • Поставить форме огромный z-index без анализа stacking context.
  • Скрыть карту на всех телефонах, хотя выбор точки обязателен.
  • Задать фиксированную высоту, подходящую только одному устройству.
  • Блокировать все touch-события документа.
  • Отключить pointer-events у карты и потерять выбор точки.
  • Переместить блок визуально через order, не проверив фокус и DOM-порядок.
  • Использовать 100vh без проверки клавиатуры и панелей браузера.
  • Тестировать только эмулятор desktop-браузера.

Профилактика

Зафиксируйте мобильный сценарий карты в дизайн-системе: допустимую высоту, слои, поведение modal или bottom sheet, работу с клавиатурой и альтернативный ввод. Добавьте визуальные и end-to-end тесты на ключевых ширинах.

  • Используйте ограниченную шкалу z-index вместо случайных значений.
  • Не создавайте transform на layout-контейнерах без причины.
  • Проверяйте карту после обновления SDK.
  • Следите за ошибками формы и незавершенными шагами на мобильных устройствах.
  • Тестируйте изменения на реальном iOS и Android до публикации.

Итог

Когда карта закрывает форму на телефоне, причина может быть в responsive-компоновке, stacking context, фиксированной высоте, прозрачном слое, перехвате жестов или реакции на клавиатуру. Надежное исправление перестраивает мобильный сценарий и проверяет полный путь от ввода адреса до отправки формы.

Если нужно исправить такой интерфейс, я могу воспроизвести проблему на мобильных viewport, разобрать CSS и слои карты, перестроить форму или modal, настроить пересчет SDK и проверить отправку адреса на iOS и Android.