Skip to main content

Bug Tracker

Side navigation

#4187 closed bug (invalid)

Opened February 19, 2009 09:19AM UTC

Closed December 02, 2010 08:07AM UTC

Last modified March 08, 2012 02:40PM UTC

document.ready fires too early on safari

Reported by: tipiirai Owned by: tipiirai
Priority: major Milestone:
Component: event Version: 1.2.6
Keywords: document, ready Cc:
Blocked by: Blocking:
Description

Safari fires $(document).ready() is fired too early when there are external stylesheets. When accessing CSS properties inside that event they are not properly set. You can see an example page here:

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

In Firefox (for example) the css() method gives correct result (300px) but in Mac/Safari it gives the full length of the DIV - stylesheet property not yet applied.

$(window).load() fixes the situation and when styles are defined inline on the page and not in external stylesheet.

I have experienced this on 1.2.6 and 1.3.1 and on many different scenarios. I think this is quite serious because when components rely on initial CSS properties Safari won't work.

Attachments (0)
Change History (17)

Changed February 19, 2009 09:20AM UTC by tipiirai comment:1

I raported about this 6 months ago for the first time on this ticket:

http://dev.jquery.com/ticket/3312#comment:5

at that time I didn't know the specific problem and the ticket was not accurate. now I have a demo page that clarly shows what's all about.

Anyway: Thank you for developing jQuery - it has changed my world.

Changed February 19, 2009 09:46AM UTC by Markus.Staab comment:2

you have to include the stylesheets first...

Changed February 19, 2009 11:41PM UTC by dmethvin comment:3

resolution: → invalid
status: newclosed

Correct, and this is documented:

http://docs.jquery.com/Events/ready#fn

Safari is picky about this.

Changed February 21, 2009 07:15AM UTC by tipiirai comment:4

resolution: invalid
status: closedreopened

Unfortunately this is not the case. I moved the stylesheet as the first element on the page. Even before the jquery script inclusion. When the stylesheet was small there seemed to be no problems. However when I made the stylesheet larger the page was behaving badly

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

sometimes css() method gets it right and sometimes not.

Changed February 21, 2009 07:16AM UTC by tipiirai comment:5

Try <strong>reloading</strong> the page multiple times with safari.

Changed February 21, 2009 04:16PM UTC by dmethvin comment:6

Can you try it with a complete document? (doctype, head, body, etc.)

Changed February 23, 2009 08:11AM UTC by tipiirai comment:7

yes. test page is now a complete document. the bug is still there - maybe it doesn't come that often now perhaps one out of ten reloads gives a falsy result.

Changed February 26, 2009 12:07AM UTC by dmethvin comment:8

Can you attach your new test document?

Changed February 26, 2009 10:17AM UTC by tipiirai comment:9

It has been there all the time. The same test page has been modified:

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

Changed March 19, 2009 02:58AM UTC by brandon comment:10

As frustrating as this issue is a simple workaround is to use a setTimeout with 1ms within document.ready. I think it mostly has to do with redraw issues in Safari.

Changed April 09, 2009 10:18AM UTC by tipiirai comment:11

This basically means that every time I want to use document.ready with external CSS I have to use this setTimeout trick to make pages work in a cross browser manner. I'm in a little doubt this even works on large CSS files - anyway this kind of tricks should be included in the jQuery and not for the responsibility for jQuery users.

I'd say this issue is still open.

Changed April 22, 2009 02:15AM UTC by brandon comment:12

owner: brandon
priority: criticalmajor
status: reopenednew

Unfortunately the DOMContentLoaded method doesn't always guarantee that *external* css assets will be loaded. If your code depends on external css, then you should use load for now.

Changed May 07, 2009 01:14PM UTC by szabolcs kurdi comment:13

I can confirm this bug and tested some solutions here (http://www.rosamez.com/?p=200) - maybe I'm wrong, but Dean and John's one (http://dean.edwards.name/weblog/2006/06/again/) is okay, but instead of testing for loaded OR complete, only "complete" is good for us. I'm not sure if it is any better than onload (in terms of downloaded content), but hope it helps. Thanks.

Changed May 08, 2009 10:07AM UTC by szabolcs kurdi comment:14

Sorry for the above comment, oncomplete is pretty much body onload, now I know ;) + on a webserver it doesn't happen very often (assuming I move all css *before* jQuery), on localhost, where everything is much faster it does happen sometimes (1-2 out of 10), but I can live with a small timeout I guess.

Changed October 31, 2010 08:59AM UTC by snover comment:15

owner: → tipiirai
status: newpending

The test case is no longer valid. Please provide a valid test case. If this issue no longer exists, please ignore this message, and the bug will be closed automatically.

Changed December 02, 2010 08:07AM UTC by trac-o-bot comment:16

resolution: → invalid
status: pendingclosed

Automatically closed due to 14 days of inactivity.

Changed March 01, 2012 11:48AM UTC by anonymous comment:17

the bug is still there, the setiterval-trick worked for me