Safari / Firefox无法正确计算jQuery .height（）

Question

在初始页面加载时，我需要计算header图像高度，然后按下它下面的main部分。 （header已修复，如果没有此项，main将显示在页面顶部）。在Chrome中，没有问题，一切正常。在Safari和Firefox中，main从浏览器顶部显示20px，这是main的边距。

JS：

var headerHeight = $('#head-image').height();

function pageSetup(elementHeight) {
    var main = $('main');
    var headerHeightPx = elementHeight +'px';
    main.css({'paddingTop': headerHeightPx});
}

$(window).on('load', function() {
    pageSetup(headerHeight);
});

HTML：

<header>
    ...
    <div class='foo'>
        <img src='image.jpg' id='head-image'>
    </div>
<header>
<main>
    ...
</main>

CSS：

#head-image {
    position: fixed;
    z-index: 1;
}

main {
    margin: 1.5em 0;
    position: relative;
    z-index: 2;
}