JQuery window width not correct in Chrome

Question

I have created a plugin which i have cut down to the bare bones of a plugin (i.e. no functionality, just the structure) to debug this issue and it still exists. It deals with resizing divs and bases this on the document's width.

The problem is that the documents reported width is reduced by 17px from its actual width and thus doesnt size the divs correctly.

I have put in alerts to find out where the problem occurs: Before "ready" function: 1780px (correct width) Inside the "ready" function: 1763px Inside the Plugin: 1763px (all values returned from "document.width" and "$(document).width()" with same results)

This is only happening within Chrome and still remains even with the plugin reduced to effectively nothing.

Any thoughts on why this is happening?

Answer 1

I have found that jQuery(window).width() return a wrong value in Safari and Chrome.

Answer 2

taken from jQuery documentation:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

you probably should be using

$(window).load(function() {});

as trigger event