56597


入力フォームのfocusの位置が異なる件についての質問です。

Windows10のChromeでは入力フォームのfocusが画面上の一番上に表示されます。  
iPhoneのSafariだと1つ下のフォームになっています。

調査したところ、どちらも一番上のフォームと二番目のフォーム、両方に`<input>`がautofocusに設定されていました。

なぜ、こういったずれが生じるのでしょうか。


CC BY-SA 4.0
2019-07-10T02:46:17.807
56535
2019-07-12T11:51:39.730
2019-07-10T15:21:12.067
2376
31799
question
html css dom
PCのChromeとiPhoneのSafariとで表示が異なる原因について


> なぜ、こういったずれが生じるのでしょうか。

理由は、Safariのバグです。autofocusがついた要素がページ中に複数ある場合の動作はHTML仕様で定義されていて、先にDOMツリーに繋がった要素が優先されます。ChromeとFirefoxはそのように動作します。Safariは仕様に準拠しておらず、優先順位なくすべてのautofocus付き要素にフォーカスを設定するため、一番最後の要素にフォーカスが残ります。

対処方法は、1ページ中に複数のautofocusがついた要素を含めないことです。


CC BY-SA 4.0
2019-07-12T11:51:39.730
56597
2019-07-12T11:51:39.730
3475
56535
answer