Коротко, по делу: как диагностировать и фиксить проблемы адаптивности и доступности форм с автозаполнением и нестандартным поведением на мобильных браузерах.
1) Диагностика — что и как тестировать
- Тестировать на реальных устройствах плюс эмуляторы/BrowserStack.
- Инструменты: Chrome DevTools (remote debugging Android), Safari Web Inspector (iOS), Lighthouse, axe-core, WAVE, Accessibility Inspector (macOS/iOS).
- Прогонять с разными UA/браузерами: iOS Safari, Chrome Android, Samsung Internet, Firefox Mobile — и с/без менеджеров паролей.
- Тесты: клавиатурная навигация, голосовые скринридеры (VoiceOver, TalkBack), увеличение/зум, смена ориентации, открытие виртуальной клавиатуры, автозаполнение, поведение фокуса, контраст и видимость фокуса.
- Логирование событий: отслеживайте focus/blur/input/change/animationstart, т.к. автозаполнение часто не триггерит `input`/`change`.
2) Общие причины проблем и быстрые исправления
- Отсутствует корректный meta viewport:
- iOS автозум вызывает масштаб при шрифтах меньше $...16$px — используйте минимум $...16$px для интерактивного текста.
- Поля скрываются виртуальной клавиатурой из‑за фиксированных футеров; не используйте жестко pinned элементы без учёта resize.
- 100vh ведёт себя некорректно на мобилах (ошибка из‑за интерфейса браузера) — использовать динамическую переменную высоты.
- Автозаполнение браузера/менеджеров паролей может менять стили (желтый/синий фон), не вызывать события, менять значение до JS-сценариев.
3) Практические исправления (код/паттерны)
a) Viewport / шрифты

b) Динамическая высота вместо 100vh
const setVh = () => {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
};
setVh();
window.addEventListener('resize', setVh);
/* CSS: height: calc(var(--vh) * 100); */
c) Переопределение автозаполнения (WebKit)
input:-webkit-autofill {
-webkit-text-fill-color: #000 !important;
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
box-shadow: 0 0 0px 1000px white inset !important;
transition: background-color 5000s ease-in-out 0s; /* чтоб не мигало */
}
d) Форсировать repaint после автозаполнения (триггер по animationstart)
@keyframes onAutoFillStart { from {} to {} }
input:-webkit-autofill { animation-name: onAutoFillStart; animation-duration: 0.01s; }
document.addEventListener('animationstart', (e) => {
if (e.animationName === 'onAutoFillStart') { /* обновить состояние, валидацию */ }
});
e) Правильные атрибуты для автозаполнения и клавиатуры

f) Доступность (labels, aria)
EmailМы никогда не передаём email.
- Не использовать placeholder вместо label.
- Для ошибок: Ошибка и при ошибке ставьте focus на первое поле с ошибкой.
- Для динамических форм — управлять фокусом и сообщать изменения через aria-live.
g) Фокус и видимость
- Никогда не убирайте outline без замены: :focus { outline: 2px solid #005fcc; outline-offset: 2px; }
- Обеспечьте правильный tabindex (обычно оставлять без явного tabindex, использовать порядок DOM).
h) Сенсорные цели и контраст
- Минимальная целевая область: $...44$px × $...44$px.
- Контраст текста >= WCAG требования (AA/AAA) — тестировать контраст.
4) Специфические поведенческие баги и решения
- Автозаполнение не триггерит JS-валидацию: после загрузки/видимости формы вручную проверяйте значения полей (e.g. run validate on DOMContentLoaded и на animationstart автозаполнения).
- Password managers на iOS могут вставлять значения в неявные поля — использовать корректные autocomplete/name и видимые поля с нормальным DOM-порядком.
- Поля, появляющиеся динамически: если добавляете поля после загрузки, некоторые авто‑филлы не сработают — добавляйте серверный hint (autocomplete) и, при необходимости, реинициализируйте.
5) Тесты с ассистивными технологиями
- Прогонять сценарии с VoiceOver и TalkBack: навигация по полям, чтение лейблов/ошибок, aria-live.
- Проверять порядок навигации Tab/Shift+Tab.
- Проверять работу с экранной клавиатурой и появление/скрытие элементов.
6) Полезные чек‑листы
- Есть label для каждого поля? Да/Нет.
- Указан правильный autocomplete? Да/Нет.
- inputmode для числовых/тел полей? Да/Нет.
- Фокус видим? Да/Нет.
- Поля не перекрываются клавиатурой (использовать resize/scrollIntoView при фокусе)? Да/Нет.
- Не отключён зум (не ставьте maximum-scale=1) — уважайте доступность.
7) Ресурсы для глубокого поиска
- axe-core, Lighthouse, WAI-ARIA Authoring Practices, WebKit autofill docs, MDN autocomplete tokens.
Заключение (в 1 предложении): тестируйте на реальных устройствах + автоматических инструментах, используйте корректные атрибуты (autocomplete, inputmode), исправляйте стили автозаполнения через :-webkit-autofill и динамически учитывайте высоту экрана/клавиатуру, а также обеспечьте корректные лейблы и управление фокусом для доступности.