CSS show/hide not firing in Safari when placed before an XHR call (FF works ok)

[ekallevig]

I'm trying to load more results at the end of a page with an .xhr call. What I want to do is onclick, show the 'loading' p and hide the 'more' button... then when the data comes back, do the opposite (hide the 'loading' p and show the 'more' button). This works fine for me in Firefox, but Safari (and Mobile Safari) just refuses to do the show/hide thing when it's followed by an .xhr call. If I put an alert between the show/hide code and the .xhr, you can see it's working, but without that, the show/hide doesn't seem to work. Mabye I'm doing something wrong here?

x$('.pagingNav').before( '<p class="loading" style="display: none">Loading...</p>' );
x$('.pagingNav a')[0].href = '#_' + x$('.pagingNav a')[0].href;
x$('.pagingNav a').on( 'click', function(e){
    x$('.pagingNav').setStyle('display','none');
    x$('.loading').setStyle('display','block');
    nextPageUrl = nextPageUrl.length > 0 ? nextPageUrl : e.target.hash.slice(2);
    x$('.'+listType).xhr(nextPageUrl, {callback:function(){
        x$('.pagingNav').setStyle('display','table');
        x$('.loading').setStyle('display','none');
        tempEl = document.createElement('div');
        tempEl.innerHTML = this.responseText;
        x$('.'+listType+':last-child').after( tempEl.getElementsByClassName(listType)[0] );
        if ( tempEl.getElementsByClassName('newer').length > 0 ) {
            nextPageUrl = tempEl.getElementsByClassName('newer')[0].firstChild.href;
        } else {
            x$('.pagingNav').setStyle('display','none');
        }
    } });
    e.preventDefault();
});

[ekallevig]

It seems like it's just very slow in safari in general, which is why there wasn't enough time for the script to actually hide and then show the loading/button. Not sure why exactly, but my primary use here is mobile safari, so would like to see if there's something slowing down the queries.

[ekallevig]

I think I've narrowed the issue a little bit. Tracing it with some console.log statements, it seems that if a click event contains an xhr call, the click event code does not execute in Safari until the xhr request returns, even if the click code is outside the xhr code block. So my first 'setStyle' statements above are not firing until the subsequent xhr call returns the data, when it should fire as soon as the click happens like it does in Firefox.

[ekallevig]

OK I think this issue just boils down to setting the 'async' option to true (it defaults to false), but FF and Safari behave differently in that case.