Image in jquery mobile fixed header overlaps content until resize event

jquery-mobile

Solution

I think the problem is that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller so jQuery Mobile puts a padding on the `.ui-page` element that is too small once the image loads. A simple fix for this is to manually set the size of the header image so that it takes-up it's required space even before its source loads.

You could also do this, although it seems pretty hacky to me, force a redraw by triggering the `resize` event on `document.ready` or maybe `window.load`:

$(window).on('load', function () {
    $(this).trigger('resize');
});

I pasted this code into the console while on your page and it re-positioned the title element as expected.

Problem

I have an image in my jquery mobile fixed header. When the page loads in Google Chrome or Apple Safari the header content overlaps the content div below the header until I resize the page. Firefox and IE work just fine. Thanks!

Original source