I stumbled upon a really odd bug in my current project, which I can only attribute to the WebKit browser engine, since I was able to recreate this in a UIWebView on iOS (in PhoneGap) and in Chrome on OS X – WebKit is the common engine in both. It’s a bizarre issue that is really easy to fix, but was dumbfounding since the user interface was not displaying what I was seeing in the WebKit debugging tools. I figured I’d share, in case anyone else runs into the same issue.
Set the CSS “display” property on the <span> element to “inline-block”, and everything works properly. This was a really strange issue since I could see the HTML DOM updates, but the actual UI wasn’t being updated.
If my description doesn’t seem to be making any sense, check it out in the video below. Keep an eye on the HTML DOM structure, as well as the rendered output.
Unfortunately, it took way longer than I would have hoped to fix such a seemingly simple issue. Hopefully this saves you some time if you run into it too!