Over a million developers have joined DZone.

Odd WebKit Bug with Elements

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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!

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Andrew Trice, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}