dimension methods not working on document.ready on safari

[tipiirai]

I tried with element.outerWidth() and it always returns the full window width when on document.ready. However after one millisecond after loading the width is correct.

[flesler]

Your details are not quite enough to be able to handle this. Could you provide a test case ? a minimalistic html file with the requires html and js to reproduce the problem. Thanks.

[anderhagen]

I discovered the same behaviour, and did some testing. When I defined the styles in the head of the HTML-doc (instead of linking to a CSS-file) it worked fine... It seams that the document.ready event maybe doesn't wait for external CSS files to load before firing (In Safari at least)...? The CSS file just contained 10 lines of code, and I run it on a local server, so response/download times shouldn't be an issue.

Safari 3.1.2, Win XP

[andrewharrison]

test case for safari document ready issue

[andrewharris]

I concur with the previous message. This is quite tricky to replicate. When I run a test from the file system, it works ok. When I run it from a server running on localhost, it fails. When the css is included it works ok, when the css file is referenced, it fails. I've attached a simple test case which includes a separate css file, and commented out inline css. It also has a timeout() commented out on the function that invokes the dimensions. On my local machine, 10 ms works, but less doesn't.

the more complicated real problem I'm having returns variations of results, not just the window dimensions, i.e. some of the values (padding, border, margin etc) are correct and some are not.

If memory serves me, the callbacks from WebKit are a little unreliable.:-(

I'm running Safari 3.1.2 on Mac OS X 5.5 (Leopard). Hope this helps.

[tipiirai]

Now I got a more clear description of the bug and a demo page.

The problem is that in Safari $(document).ready() is fired too early. There is no way to access CSS properties when using external stylesheets. Here is a demo

​http://flowplayer.org/demos/test/jquery1.htm

in Firefox (for example) css() method gives correct result (300px) but not in Mac/Safari.

I have experienced this on 1.2.6 too and on many different scenarios. I think this is quite serious because when components rely on initial CSS properties Safari won't work. $(window).load() fixes the situation.

[tipiirai]

forgot to mention that the problem is also fixed when styles are defined on the page and not in external stylesheet.

[brandon]

Marking as dup of #4187