'How do I prevent Android Chrome inputs from manipulating the scroll position when the input value "overflows"?
Text input elements are behaving strangely for me on Android Chrome, where they start aggressively manipulating their own scroll position when typing enough characters to overflow their allotted content space.
The scroll position will follow the input cursor/caret --and the most recently entered character-- as the contents overflow *until* a space character is entered, at which point, the input snaps the scroll position back to hide the entirety of the most recent word that was entered. Typing another character after this point snaps the scroll position back to where you left off (unless you hit backspace, which does nothing to the scroll position and keeps you "in the dark" as to where your caret is and what it's doing).
I have a hard time believing that this is behaving as designed, and I'm most likely going to submit a bug report to the Chrome team, but I wanted to know if anyone else on the internet had any further insight or ways to work around the behavior in the meantime. It's really jarring and annoying.
I thought I had done something naive in my custom input styling/logic when encountering this in the site I'm developing, but this screen capture was taken with a simple <input> element with no additional styling or javascript rigging and it's still exhibiting the same behavior.
The capture was taken on a Galaxy S20 with Google Chrome v101.0.4951.61 (on 5/20/22) using the Gboard virtual keyboard v11.6.10.433184565-release-arm64-v8a.
Here's a snippet to see if it's happening on your device:
div {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100%;
}<body>
<div>
<input>
</div>
</body>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|