Setting HTM5 text kills scrollbar drag in Chrome

Question

I have a timer in Javascript that fires once per second to update some text in the page (HTML5) like this:

document.getElementById('CountDown').innerHTML = "some string";

This works fine except that if this code runs while the user is dragging a scrollbar handle the drag is aborted. This is a very annoying user interface behavior which I have not been able to resolve.

If I comment out the line in the timer event then the scrollbar works normally.

Note: It only happens on Chrome, not on Firefox or Opera.

Any idea how to address this?

Answer 1

Probably not the answer you want to hear but I had this problem several months ago, there are several known bugs with the smooth scrolling feature of chrome when javascript is updating the DOM.

The newer versions of Chrome seem to handle this much better. I did a quick test where the code is similar to yours on the latest version of Chrome, and there were no problems.

It seems unlikely that there is an error in your code if it is working well in other browsers. Might be best suggesting users to ensure Chrome is fully updated for the best experience on the website or to use another browser.