Strange input behavior in WebKit

Strange input behavior in WebKit

There's a wee bit of WebKit insanity you should know about if you do things like make input fields appear and disappear in your web pages. In my case, I have a text input field which is contained within a div, and by using Bootstrap, I have it hidden by default. They call it a "modal", since when it pops up, you can't reach anything else on the page.

This is all well and good on browsers like Firefox, but in Safari, strange things can happen. All you have to do is start typing beyond the width of the field. If the field will fit 20 characters, type 21 or more into it. As expected, everything will shift over as you type, and your latest additions will show up on the far right.

So far, everything is fine. Where it goes crazy is when it's time to bring that field back up for another use. You'll click on it and start typing, and it'll look like it's not "hearing" you. After you type a few random garbage characters, it seems to start working normally again, so you figure "oh, it lost those, how strange" and type in whatever you intended to say.

Then you submit that and realize that instead of getting "this is my string", you actually submitted "dfkljsthis is my string". Those garbage characters were there the whole time, and you just couldn't see them!

At this point I figured I must have been doing something stupid with my CSS and tried to use the usual formatting stuff to view the position. Something must have been different when it was broken vs. when it worked. It took me a while to even figure out that you had to type enough to scroll it the first time in order for it to be broken on the second pass. Before realizing that, it seemed random.

It gets worse. If you hold down a key or otherwise type a significant amount even though you can't see it, it will eventually catch up and "pop" all of that text into a visible state. At that point, everything is back to normal and you can delete the mess and start over.

This was actually biting me in Chrome until I happened to restart and picked up a new release. Then it never happened again. A quick check of the notes for that version showed that they had integrated a patch which fixes a bug in how they handle disappearing and reappearing page elements.

Safari doesn't have this patch in it yet, so it still happens there.

It's a mixed bag. I didn't cause it, and there doesn't seem to be a good workaround since .scrollLeft(0) doesn't actually do anything when this happens. It does affect real users, but only those who do a longer-than-usual input and then come back and try to make another one. At least it's only really Safari now, since Chrome has moved past it.

If you have Safari and want to see it in action, I put together a minimal reproduction case. It's obviously pointless now that the original problem has been resolved, but I'm providing it just so that readers can see what kind of strangeness I had to fight. A browser bug never occurred to me.