Databases
StackOverflow2013
Postsdbo
POUnexpected scrolling when typing in a textbox after anchor top (Android-friendly mobile webpage development)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUnexpected scrolling when typing in a textbox after anchor top (Android-friendly mobile webpage development)
    text
    copied!<p><strong><em>[Note that I can only reproduce the issue on the Android mobile web browser (used via emulator).]</em></strong></p> <p><strong>Summary</strong></p> <p>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.</p> <p><strong>Initial Investigation</strong></p> <p>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?</p> <p><strong>Steps to reproduce:</strong></p> <p>A. Create a new webpage, test.html, with the following markup:</p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta name="viewport" content="width = device-width; initial-scale=1.0; " /&gt; &lt;/head&gt; &lt;body&gt; &lt;a name="top"&gt;&lt;/a&gt; &lt;input type="text" /&gt; &lt;a href="#bottom"&gt;Bottom&lt;/a&gt; [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] [Dummy Text] &lt;a name="bottom"&gt;&lt;/a&gt; &lt;a href="#top"&gt;Top&lt;/a&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>B. On your Android mobile browser, visit test.html</p> <p>C. Click the link "bottom"</p> <p>D. Click the link "top"</p> <p>E. Click in the textbox</p> <p><strong>Actual Results:</strong></p> <p>The browser scrolls down to the bottom of the page. Users can't see what they type now.</p> <p><strong>Expected Results:</strong></p> <p>The browser doesn't scroll anywhere after E. The user can input text without distraction.</p> <p><strong>Notes:</strong></p> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload