[Note that I can only reproduce the issue on the Android mobile web browser (used via emulator).]
Summary
After clicking an anchor to go to the bottom of the page, and another anchor to get to the top of the page - and typing within a textbox at the top, you will be scrolled back down to the anchor at the bottom of the page.
Initial Investigation
It seems this behavior is somehow the result of having a viewport meta tag. I surmise, the browser on Android gets confused with anchor links and where the user dragged within the view, when the user begins to type. I realize this is a bit of complex scenario, but anyone have tips / advice on getting around this issue?
Steps to reproduce:
A. Create a new webpage, test.html, with the following markup:
<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. On your Android mobile browser, visit test.html
C. Click the link "bottom"
D. Click the link "top"
E. Click in the textbox
Actual Results:
The browser scrolls down to the bottom of the page. Users can't see what they type now.
Expected Results:
The browser doesn't scroll anywhere after E. The user can input text without distraction.
Notes:
If the user drags the screen to get to the top, then they can type in the textbox without getting scrolled down. The problem seems isolated to anchor links, textbox, and the viewport tag. If anyone of those variables are removed, the bug doesn't exist.
