jQuery UI - Dialog Hide Effect in Firefox - Flickering

Question

I have a function that calls .dialog on a dynamically generated element. The code:

dialog: function(message){
    $('<div>').attr('innerHTML',message).dialog({
        draggable: false,
        width: 500,
        hide: 'puff',
        resizable: false,
        bgiframe: true,
        modal: true,
        buttons: {
            Ok: function() {
                $(this).dialog('close');
            }
        }
    });
};

(dialog is a function of an object named Global)

When I close the dialog in IE, the effect works as expected. However, in Firefox the hide effect is all sorts of jagged and 'flicky'. I've seen other questions asked about the UI 'flickering' in FF, but they didn't quite seem to fit my situation.

Please, give me some good news and tell me that I'm doing something wrong and Firefox DOES support these effects.

This is one of the few times that IE has been successful while FF failed.

Answer 1

I have had a similar problem with scrollbars and visibility. It is not a FireFox bug. I could trace it down to a line in jQuery where in the css() function it calls the swap() function:

jQuery.swap( elem, props, getWH );

Please refer to http://dev.jquery.com/ticket/5743 for why this happens.

The jQuery swap function temporarily updates the DOM forcing FireFox to refresh the page. You may want to make a testcase from your example, then comment out the swap call in jQuery to verify this and file another bug in the jQuery ticket system.