$(this).css("width") not working on ancohor tags in Safari

Question

I'm using CSS selectors to generate custom pop-ups for a web templates - basically, some some the producers aren't comfortable with JS and I need an easy way for them to set pop-up sizes etc. I'm not really interested in the merits of this approach, but rather wish to understand why jquery seems to be unable to get the width and height as defined in the CSS for a anchor in Safari.

See: http://f1shw1ck.com/jquery_sandbox/csspops.html

The meat of my question:

For the selector a.popup {width: 800px;height: 560px;} and the anchor <a href="http://www.metmuseum.org/toah/hd/apol/hd_apol.htm" class="popup">African Rock Art: Apollo 11 Cave Stone (c. 25,500 - 23,500 BCE)</a> why are

if ($(this).css("width")) {   
windowParams.width = $(this).css("width");
}
if ($(this).css("height")) {   
windowParams.height = $(this).css("height");
}

both properties returning as zero in Safari?

onclick pop-up alert in other browsers: toolbar=no,directories=no,location=no,resizable=yes,menubar=no,scrollbars=yes,status=no,width=800px,height=560px,top=20,left=240

alert in Safari: toolbar=no,directories=no,location=no,resizable=yes,menubar=no,scrollbars=yes,status=no,width=0px,height=0px,top=20,left=640

Thanks for helping me understand.

Answer 1

It doesn't work in Chrome either.

From this link and this other Stack Overflow answer, it looks like the reason is that Webkit browsers will report '0' or 'unknown' as the size until it is fully loaded, which may be too late.

As Micah notes, this is because Javascript and CSS are loaded in parallel, which means that the styling may not be fully applied by the time the scripts run.

Answer 2

Andy is correct. There is a solution offered here:

http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome/318796#318796