[Обратите внимание, что я могу воспроизвести проблему только в мобильном браузере Android (используется через эмулятор).]
Основная информация
После нажатия кнопки привязки, чтобы перейти к нижней части страницы, и другой привязки, чтобы попасть в верхнюю часть страницы, и ввода текста в текстовое поле вверху, вы будете прокручиваться обратно к привязке внизу страницы. страница.
Первичное расследование
Кажется, такое поведение является результатом наличия метатега области просмотра. Я предполагаю, что браузер на Android запутывается с привязочными ссылками и тем, куда пользователь перетаскивает вид, когда пользователь начинает печатать. Я понимаю, что это немного сложный сценарий, но у кого-нибудь есть советы / рекомендации по решению этой проблемы?
Шаги для воспроизведения:
A. Создайте новую веб-страницу 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. Нажмите на ссылку "top"
E. Нажмите в текстовом поле
Фактические результаты:
Браузер прокручивает страницу вниз. Пользователи не могут видеть, что они печатают сейчас.
Ожидаемые результаты:
Браузер не прокручивает нигде после E. Пользователь может вводить текст, не отвлекаясь.
Примечания:
Если пользователь перетаскивает экран, чтобы попасть наверх, он может ввести текстовое поле без прокрутки вниз. Проблема кажется изолированной для привязки ссылок, текстового поля и тега области просмотра. Если кто-либо из этих переменных будет удален, ошибка не существует.