Document width calculated via Javascript is different in Firefox compared to other browsers

Question

I have a problem with retrieving the current page document width from Mozilla Firefox. While the rest of the browsers report the correct width of the document, Firefox reports a smaller one (example: at screen resolution of 1920x1080 IE, Chrome and Safari reports 1920 while Firefox reports 1903).

I use document width in $(document).ready(function() { ... }); to reposition a div element. Funny this is that after using alert() inside this function, the element reposition correctly, though the document size is still smaller than other browsers.

(i) Is there a scrollbar? (it is taking exactly 17px in FF) (ii) Do you check the height after DOM has stabilized? — Salman Arshad
– Salman Arshad, Commented Apr 4, 2012 at 8:52
(i)Yes. (ii) No, i don't need height, only width. Btw, how do you check the DOM after is stabilized? I did a small trick, adding a delay of 500ms and is reposition correct now, but I would like a static solution. — Scarpelius
– Scarpelius, Commented Apr 4, 2012 at 9:01
If scrollbar is present the width will be screen width - 17px. The idea of calculating the width inside document ready is right but not sure why you get inconsistent widths across browsers. One reason is that that your document changes height after document ready. E.g. if you have images that do not have width/height specified then browser does not know the height of the document on document ready. Once it receives (first few KB of) the image it then re-calculates the height and determines that a scrollbar is required. You might want to calculate the height in window.load instead. — Salman Arshad
– Salman Arshad, Commented Apr 4, 2012 at 9:30

user785541 · Accepted Answer · 2012-04-04 09:50:25Z

1

As Salman already noted in the comments, this difference comes from the scroll bar. Depending on the browser (and probably also on whether quirks mode is enabled), the scrollbar might be considered "outside" the document (in which case its width won't be added to the document width) or part of the <html> element (then its width will be added to the document width). So document.documentElement.offsetWidth will return inconsistent results - sometimes with the scrollbar, sometimes without it. document.body.offsetWidth on the other hand seems consistent across browsers - scrollbar width isn't included.

If what you want to learn is viewport width, regardless of the contents, then window.innerWidth might be a better choice. I tested in Firefox, Chrome and MSIE 9.0 - it returns the full screen width for maximized windows in all of them.

answered Apr 4, 2012 at 9:50

user785541

Sign up to request clarification or add additional context in comments.

1 Comment

Scarpelius Over a year ago

I will try innerWidth, but the error no longer appear. The respective page was in a particular state with the height at limit of screen, barely over the screen height. Once I've added a couple of <br> to increase page height, the problem vanished.

Collectives™ on Stack Overflow

Document width calculated via Javascript is different in Firefox compared to other browsers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related