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/[e-mail]-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.