描画領域の最下部に固定されたナビゲーションが優勢になりつつある。そういうウェブサイトを小さな端末で閲覧し、なにがしかのフォームを入力しようとすると、入力中のフォームが下部固定ナビゲーションに隠れて見えなくなってしまうことがある。入力はできるが、入力中の文字などが見えない。スクリーン・キーボードを出す時に、キーボードでフォーム要素が隠れないよう、最小限の量で入力中のフォームの位置が調整される結果だ。
Android ChromeやMobile Safariがそこそこ賢いのか、わざと作ろうとしてもうまくいかない。画面サイズやスクリーン・キーボードの高さなど、ユーザー環境に強く依存するので、制作中に気付くことも難しそうだ。これはもう「そういうこともある」と覚えておくしかない。スクリーン・キーボードが出ると描画領域の高さが半分になる(横向きを考慮すると最悪1/4になる)ことを意識する、とも言い換えられる。
フォームにフォーカスが当たっている時は、ナビゲーションを隠す、という方法が手っ取り早いが、副作用(入力を途中でやめた時に、他のページへ移動しづらくなる)もある。scroll-margin-block-endプロパティーがうまく機能すればとも考えているが、前述の通り、うまく再現出来ておらず、確認すらできない。僕が運良く気付いたケースでは、フォーム要素の位置を描画領域の上の方へ移動させることで、位置の調整が起こらないようにし、解決した。