Input line is wonky in Chrome for Android
More context in the original Reddit post: https://www.reddit.com/r/webdev/comments/u41ixm/ive_been_fighting_a_chrome_for_android_bug_for/
Hey r/webdev! For the better part of a year, I've been fighting this weird bug on my website, when using Google Chrome for Android. Here's a 30-second video of the bug in question: https://youtube.com/shorts/AYS4o_We-XY?feature=share
For whatever reason, while the user is typing, and the input line is overflowing, space characters cause the line to "jump" backwards by a few words. As soon as you input a character that isn't a space, it "jumps" back to the end of the line - where it should be. It's hard to explain, but very clear if you watch the video. This is really annoying, if you're trying to type a sentence, as a user.
It doesn't happen on desktop or iOS, nor does it happen in Firefox for Android. It's something about Chromium-based browsers on Android.
If this is a bug that can be fixed, I'm assuming it must be related to CSS? I've tweaked my stylesheet quite a bit, but I've yet to find a solution that fixes this problem while still preserving the "style" of input form I need. Here is a link to the stylesheet.
Any help would be greatly appreciated! I'm a self-taught developer, without anyone else to turn to.
Thanks for reading!
Ink