IE9 Submit-time CSS Repainting

Question

We have an animated spinner gif we use to spice up the submit button after the user has submitted a form. If all validation passes on a form, we assign background via jQuery's css() method, setting the background image, positioning and color all in one.

IE9 is not showing the background image on submit, though it continues to be seen in other browsers.

This technique has worked fine in previous IE browsers, but seems to have broken in IE9, including in older "browser modes". I'm not sure if this is a bug in IE9, but it certainly has changed behavior and I cannot trust IE7/8 modes to behave as expected because of this.

It seems as though maybe IE decides not to do any more repainting after the user has submitted the form. If this is the case I'm not sure I've got a way around it, but I'd like to think this isn't really the case. We ran into a previous problem with this technique in Firefox, where we discovered that Firefox halts all http requests besides the form request itself, which means if the background image was not in cache it wouldn't work. Because of this we've taken to preloading the spinner on an Image object in memory.

Interestingly, if I manually call the method that updates the CSS on the button from IE dev tools console, it works just fine. It's only when we have an actual submit that it gets stuborn and fails to draw in the spinner. Also interestingly, it does remove the text from the submit button, which is a second part of the effect.

Anyone have any ideas on what's causing this/how to prevent it?

Here's a slimmed down version of the live()d code that handles the submit:

jQuery.fn.disableSubmit = function() {
    this.find("input[type=submit]").each(function() {
        $(this).css({"background": "url(/asdasdasd.gif) no-repeat 50% 50%"});
    });
    return this;
};

$("form").live("submit", function() {
    var form = $(this);

    form.disableSubmit();
    return true;
});

Answer 1

I had a similar issue with ExtJS and discovered exactly what you discovered about IE9 not loading any new images after the form has been submitted.

Here was my workaround that doesn't require preloading, though admittedly it's a little hackish.

function() {    
    Ext.MessageBox.wait('Searching for tenants eligible for rent increase...', 'Searching');
    setTimeout(function() { document.getElementById('rental_increase_form').submit(); }, 200);
    return false;
}

Basically I return false when the form submit event fires, I do all my CSS loading, and then I manually submit the form via Javascript after a timeout of 200 milliseconds.

I hope that helps. Did you submit a bug to Microsoft?