入力フォームのfocusの位置が異なる件についての質問です。
Windows10のChromeでは入力フォームのfocusが画面上の一番上に表示されます。
iPhoneのSafariだと1つ下のフォームになっています。
調査したところ、どちらも一番上のフォームと二番目のフォーム、両方に<input>
がautofocusに設定されていました。
なぜ、こういったずれが生じるのでしょうか。
入力フォームのfocusの位置が異なる件についての質問です。
Windows10のChromeでは入力フォームのfocusが画面上の一番上に表示されます。
iPhoneのSafariだと1つ下のフォームになっています。
調査したところ、どちらも一番上のフォームと二番目のフォーム、両方に<input>
がautofocusに設定されていました。
なぜ、こういったずれが生じるのでしょうか。
なぜ、こういったずれが生じるのでしょうか。
理由は、Safariのバグです。autofocusがついた要素がページ中に複数ある場合の動作はHTML仕様で定義されていて、先にDOMツリーに繋がった要素が優先されます。ChromeとFirefoxはそのように動作します。Safariは仕様に準拠しておらず、優先順位なくすべてのautofocus付き要素にフォーカスを設定するため、一番最後の要素にフォーカスが残ります。
対処方法は、1ページ中に複数のautofocusがついた要素を含めないことです。