Why scrollWidth doesn't work in this case in Firefox?

Question

I'm trying to make a simple marquee in Javascript, and need to get the full content width of innerDIV in the following:

<div id="container" style="width: 100%; overflow: hidden;">
    <div id="innerDiv" style="direction: rtl; white-space: nowrap; overflow: visible; position: relative;">
        very long ... text
    </div>
</div>

I tried scrollWidth. It works well in Chrome but not in Firefox (where it gives the value of clientWidth instead).

Here is a live demonstration: http://jsfiddle.net/5fPGy/3/ (try it with Chrome and Firefox)

Does anyone know why? and how to get that full width?

Thanks in advance.

Answer 1

I had the same issue and I found an answer for your questions. This is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=833542.

Firefox returns for scrollWidth the clientWidth value. It should be fixed in Firefox 21.

For now, I used a workaround to get the correct scrollWidth on Firefox: set the overflow to hidden, get the correct scrollWidth and revert the overflow to visible. Please see: http://jsfiddle.net/5fPGy/5/

var scrollWidth = $(ele).css("overflow", "hidden")[0].scrollWidth;
alert('clientWidt h = ' + ele.clientWidth + ',  scrollWidth = ' + scrollWidth  );
$(ele).css("overflow", "visible");

Best of luck,

Andrei