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.
The problem:
I have a horizontal slider (custom HTML/JS) component, and content within a separate HTML <span> should be updated when the slider value changes. The JavaScript seemed to be working properly, I could see console.log output that showed events were being dispatched, but the UI wouldn’t display what I was seeing in the debugging tools. Instead, the UI would update sporadically with a value, but not consistently, and not for every time that I updated the HTML DOM.
The solution:
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!