Safari Code Timing Problems

Safari Code Timing Problems

Okay, so I have the below code on a site I have in development, a fairly simple function that resizes some images in a gallery, tweaks a bit of CSS and then is run in a $(document).ready function.

It works fine in Firefox, but seems to have bugs in Safari. Sometimes the pic_height and pic_width variables don't seem to be set properly, and that causes sizing problems throughout the function. Where it gets weird/frustrating is as follows. When I use Safari's debugger, set breakpoints and step through bit by bit to see where the issues are (or go low tech and add alerts even), things seem to work fine. Essentially, I can only reproduce the bug when not debugging, which is exactly as aggravating as it sounds. I am using jquery 1.4.1, and have 1.7.2 lloading for the UI, although that doesn't seem relevant to this bug.

I am including this code in a separate file in my page head, but the same problem persists when I just leave it in the page body, so I don't think that's the cause.

Can anyone see what would be making this bug out in safari?
  1. function size_change(size)
  2. {
  3.     $('div.pic-wrap').each(function () {
  4.         var pic_height = $(this).children('img').height();
  5.         var pic_width = $(this).children('img').width();
  6.         if(pic_height >= pic_width)
  7.         {
  8.             var ratio = size/pic_height;
  9.             $(this).children('img').height(size);
  10.             $(this).children('img').width(pic_width*ratio);
  11.         }
  12.         else
  13.         {
  14.             var ratio = size/pic_width;
  15.             $(this).children('img').width(size);
  16.             $(this).children('img').height(pic_height*ratio);
  17.         }
  18.         $(this).height($(this).children('img').height()+18);
  19.         $(this).width($(this).children('img').width());
  20.         $(this).parent('div.picture').width(size);
  21.         $(this).parent('div.picture').height(size+18);
  22.         $(this).css('margin-top', $(this).parent('div.picture').height() - $(this).children('img').height());
  23.         
  24.     });
  25. }
  26. $(document).ready(function() {
  27.     size_change(225);
  28.     $('#slider').slider({min: 150, max: 300, value: 225});
  29. });