Javascript not loading images properly in Firefox v8 - v11

Question

I'm wiring up a photography website and I'm having erratic behaviour in FF8 through 10.

When I click through the thumbnail images on the site, every once in a while, the display image loads up behind the the thumbnails as well as too far down the page (almost out of site).

I've tested in a bunch of other browsers and I can only reproduce it in FireFox. It's more easily reproduced in FF or OS X, but I've been told it also happens (but less frequently) in FF for Windows 7.

Here are my current tests.

OS -------- Browser -------- Status

Win7 ------- IE 9 --------------
Win7 ------- Chrome 17 -----
Win7 ------- FireFox 10 -----
Win7 ------- FireFox 11 -----
OS X ------- Chrome 17 -----
OS X ------- Safari 5 ----------
OS X ------- FireFox 8 -------
OS X ------- FireFox 11 -----

Here's the staging site http://captures.infinitas.ws

And here's a screenshot of the problem

The problem is that this is so erratic that I don't know where to begin looking for the issue.

Here are some relevant snippets of code.

Javascript

function centerMe(img, show, container) {
    var img$ = $(img);
    container = container || img$.parent();
    var deltaW = Math.round((container.width() - img.width) / 2);
    var deltaH = Math.round((container.height() - img.height) / 2);
    img$.css({top: deltaH, left: deltaW});    
    if (show) {
        img$.css("visibility", "visible");
    }
}

$(document).ready(function (){
    var imgs = [];
    $('a.thumb').each(function () {
        var img = new Image();
        img.src = this.href;
        imgs.push(img);
    }).click(function() {
        var container = $("#gallery > div");
        var oldImg = container.find("img");

        var img = new Image();
        img.src = this.href;
        var newImg = $(img).hide();
        container.append(img);
        centerMe(img, false, container);

        oldImg.stop(true).fadeOut(500, function() {
            $(this).remove();
        });
        newImg.fadeIn(500);
        return false;
    });
});​

Stylesheet

#content
{
    position: relative;
    width: 1160px;
}

#gallery
{
    position: absolute;
    width: 1160px;
}

#gallery > div
{
    position: relative;
    width: 800px;
    height: 600px;
    text-align:center;
    vertical-align:middle;
}

#gallery > div  > img
{
    position: absolute;
}

/*Gallery Navigation*/
#gallery > ul
{
    position: absolute;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style-type: none;
    vertical-align: top;
    width: 320px;
    top: 0;right: 0;
}

#gallery > ul > li
{
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    padding-top: 3px;
}

HTML

   <div id="gallery">
        <div>
            <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg"
                onload="centerMe(this, true)" style="visibility: hidden" />
            <noscript>
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg" />
            </noscript>
        </div>
        <ul>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/Ti/CAP0029-Ti.jpg" /></a></li>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-Hp2qmZC/0/L/CAP0284-copy-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-Hp2qmZC/0/Ti/CAP0284-copy-Ti.jpg" /></a></li>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-qG9wB77/0/L/CAP0167-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-qG9wB77/0/Ti/CAP0167-Ti.jpg" /></a></li>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-ZxNk2zh/0/L/CAP0097-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-ZxNk2zh/0/Ti/CAP0097-Ti.jpg" /></a></li>
            <li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-j6tmqHJ/0/L/amanda-005-L.jpg"
                target="_blank">
                <img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-j6tmqHJ/0/Ti/amanda-005-Ti.jpg" /></a></li>
        </ul>
    </div>

I realize the question is kind of long, but if anyone can lend some advice as to why this is happening, I'd love to hear your thoughts.

Answer 1

You're setting .src on an image and immediately trying to read its dimensions (in centerMe ). Per the current HTML5 spec text, which Firefox implements, the dimensions update asynchronously from the src set. Doing the size-dependent stuff from the image's load event should work.

There's an issue raised on the spec that the spec doesn't seem to be web-compatible, and there are some development Firefox builds at https://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/bzbarsky@mozilla.com-7f8434f967df/try-macosx64/ that have the behavior changed to match other browsers here. Might be worth testing those on your site to see whether they fix the issue.

Answer 2

It appears to me like Firefox is not waiting for your document to load so the event handlers are not properly getting attached.

When I look at the actual code in Firefox, I see this:

$(document).load()

when it should be:

$(document).ready()

near the end of site.js .

Also, this code appears to be somewhat minimized (all indentation is removed and many variables are renamed). I would suggest debugging the app before minimizing since minimizing it makes it a lot harder to debug. When it all works properly everywhere, then you can minimize it and test once more.