[この問題は、Android モバイル Web ブラウザー (エミュレーター経由で使用) でのみ再現できることに注意してください。]
概要
アンカーをクリックしてページの下部に移動し、別のアンカーをクリックしてページの上部に移動した後、上部のテキストボックス内に入力すると、スクロールしてページの下部にあるアンカーに戻ります。
初期調査
この動作は、viewport メタ タグを使用した結果のようです。Android のブラウザーは、ユーザーが入力を開始したときに、アンカー リンクと、ユーザーがビュー内でドラッグした場所と混同されると思います。これは少し複雑なシナリオだと思いますが、この問題を回避するためのヒントやアドバイスはありますか?
再現する手順：
A. 次のマークアップを使用して、新しい Web ページ test.html を作成します。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width = device-width; initial-scale=1.0; " />
</head>
<body>
<a name="top"></a>
<input type="text" />
<a href="#bottom">Bottom</a>
[Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text]
<a name="bottom"></a>
<a href="#top">Top</a>
</body>
</html>
B. Android モバイルブラウザで、test.html にアクセスします。
C. リンク「下」をクリックします
D. リンク「トップ」をクリックします
E. テキストボックスをクリックします
実績：
ブラウザがページの一番下までスクロールします。現在、ユーザーは入力内容を確認できません。
予想された結果：
E の後、ブラウザーはどこにもスクロールしません。ユーザーは気を散らすことなくテキストを入力できます。
ノート：
ユーザーが画面をドラッグして一番上に移動すると、下にスクロールせずにテキストボックスに入力できます。問題は、アンカー リンク、テキスト ボックス、ビューポート タグに限定されているようです。これらの変数のいずれかが削除された場合、バグは存在しません。