Я хотел adjustResize. Получил adjustNothing. Три раунда войны с Android-клавиатурой в WebView

• freezeModal() — снимает с модалки backdrop-filter, тени, анимации, ставит фиксированную высоту
  
• unfreezeModal() — возвращает обратно
  
• __kb_spacer — невидимый <div> высотой с клавиатуру, чтобы низ модалки не залезал под IME
  
• _kbLockUntil — таймер, защищающий от race-condition между focus и blur
  
• __imeTransition — флаг, что в данный момент идёт анимация клавиатуры
  
• Deferred render wrapper — обёртка над render(), которая ставит обновления в очередь, если идёт анимация
  
• ensureVisible(element) — функция, которая прокручивает контейнер так, чтобы инпут не был перекрыт клавиатурой
  
• Listener на visualViewport.resize — для отлова реального состояния viewport
  
• MutationObserverнаdocument.body — чтобы ловить любые изменения DOM, которые могут произойти во время IME-анимации, и тормозить их

• 600 строк кастомной keyboard-логики
  
• Приложение, которое работает на 30% быстрее, чем без всей этой машинерии
  
• Случайные фризы, которые я не могу воспроизвести
  
• Растущее ощущение, что я делаю что-то не то

• Геометрия. Модалка центрирована относительно вьюпорта. Если viewport ужался — модалка должна перецентрироваться. Это лишний reflow и моргание.
  
• Скролл. Внутренний overflow-y: auto пытается прокрутить контент к фокусу. Но контейнер сам в этот момент меняет размеры. Скролл-позиция «прыгает».

function openSheet(html, options = {}) {
  const sheet = document.getElementById('sheet');
  const panel = sheet.querySelector('.sheet-panel');
  const body = sheet.querySelector('.sheet-body');
  body.innerHTML = html;
  if (options.title) {
    sheet.querySelector('[data-sheet-title]').textContent = options.title;
  }
  sheet.classList.add('active');
}
function closeSheet() {
  document.getElementById('sheet').classList.remove('active');
}

#sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
}
#sheet.active { visibility: visible; }
.sheet-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 92dvh;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
#sheet.active .sheet-panel { transform: translateY(0); }

body.kb-open .modal-content {
  backdrop-filter: none;
  box-shadow: none;
  filter: none;
  transition: none;
}
body.kb-open .sheet-panel {
  backdrop-filter: blur(20px);
  /* sheet может оставить blur, потому что не перерисовывается */
}