How to avoid jumping position within select element when changing mouse cursor style (Chrome)?

Question

I use the following in my web app to give feedback, that something is currently loading:

jQuery(document).ajaxStart(function(){
    jQuery('body').css('cursor', 'wait');
});
jQuery(document).ajaxStop(function(){
    jQuery('body').css('cursor', 'auto');
});

Unfortunately this seems to have a bad side-effect in Chrome (Linux v20) when it comes to select fields: the position jumps

you can see it here: http://jsfiddle.net/Riesling/4QCL3/

Is there a way to avoid this behavior?

Answer 1

That's my current workaround, but since I can't detect for sure if the options panel is visible or not the cursor won't be changed until the select element looses focus.

function ajax_start() {
    if(jQuery(document.activeElement).prop('tagName').toLowerCase() == 'select') {
        window.setTimeout('ajax_start', 1000);
    } else {
        jQuery('body').css('cursor', 'wait');
    }
}