Over a million developers have joined DZone.

Odd WebKit Bug with Elements

DZone's Guide to

Odd WebKit Bug with Elements

· Web Dev Zone ·
Free Resource

Building real-time chat? Enroll in a Free Course on Mobile Chat Development. 

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!

Power realtime chat, IoT and messaging apps at scale. Pubsub realtime messaging, functions, chat, presence, push, notifications, blocks catalog and more.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}