Chrome viewport width/height detection problem?

programming web dev
1

I have made small script that need to resize image to fit the entire stage of the browser
code:


function resizeBg() {
            if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                $bg
                    .removeClass()
                    .addClass('bgheight');
            } else {
                $bg
                    .removeClass()
                    .addClass('bgwidth');
            
            }
            var pW = (theWindow.width() - $bg.width())/2;
                        $bg.css("left", pW);
            var pH = (theWindow.height() - $bg.height())/2;
                        $bg.css("top", pH);
                        
        }
                                    
 theWindow.resize(function() {
       resizeBg();
  }).trigger("resize");

where $bg is reference to the image
theWindow = $(window)
and css classes .bgwidth and .bgheight have 100% width or height.

The code works as expected in FF and IE 7,8,9 (for my surprise) , but i have problems in Chrome.

theWindow.height() or theWindow.width() does not return anything, i have tryed some other window size detection functions but the result is pretty much the same.

Edit: I manage to fix the problem. The calculations were trown off since Chrome fired up the event before the image is loaded. So i preloaded the image and that fixed the issue.

Regards Thovas