jQuery Dialog BUG in IE6 & Quirks Mode

Hi,

I have found a bug in jQuery dialog - it has strange behavior when dragging and resizing a dialog in IE6 or IE7 and up in Quirks Mode.

The problem is that when resizing or dragging many times then the Dialog:

• Becomes smaller;
• The content becomes bigger.

I've been trying a lot to try and fix this, I had a walk-through the jQuery UI code and found out these:

On dragging guys from jQuery performs some strange things:

• Why do they set the height of the Dialog to it's height? "$(this).height($(this).height())". I would not have had anything against it if that piece of code would not set the height of the Dialog with 5px shorter.
  Yes, I'm serious - 5px shorter, however I could not understand how that is possible because it set's the height to the same height.
  
  For example if I do this:
        $(this).height(200);
  then $(this).height() would be equal to 194. QUESTION to jQuery specialists WHY?
  
• Why do they have to save the height of the Dialog before dragging? I am not resizing the Dialog.
• Next on drag stop they set the height back to the saved value - heightBeforeDrag. What for?

Code:

self.uiDialog.draggable({
   cancel: '.ui-dialog-content, .ui-dialog-titlebar-close',
   handle: '.ui-dialog-titlebar',
   containment: 'document',
   start: function(event, ui) {
    heightBeforeDrag = options.height === "auto" ? "auto" : $(this).height();
    $(this).height($(this).height()).addClass("ui-dialog-dragging");
    self._trigger('dragStart', event, filteredUi(ui));
   },
   drag: function(event, ui) {
    self._trigger('drag', event, filteredUi(ui));
   },
   stop: function(event, ui) {
    options.position = [ui.position.left - doc.scrollLeft(),
     ui.position.top - doc.scrollTop()];
    $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
    self._trigger('dragStop', event, filteredUi(ui));
    $.ui.dialog.overlay.resize();
   }
  });

On Resizing we have some other strange behavior - for some reason the content of the Dialog becomes bigger with 6px each time you resize the dialog up and down. Why?


It would be very useful if anyone from jQuery Developers will explain us all these strange behaviors.
It can be reproduced even on jQuery Ui page:

Click to enlarge:

The version of jQuery that I was using was 1.8.11 - the last version and I guess this was also the version which jQuery is using.

Ok, we have the problems but how we fix these?
You can fix it using this code when creating a dialog:

Code:

var fns = {
      adjustSize: function() {
            $mydialog.width("100%");

            // This is a fix for jQuery because it has problems when Resizing and Draging:
            // - The Dialog becomes smaller
            // - The Content of dialog bigger
            if ($.browser.msie) {
                // Check if Browser in QuirkMode
                if (document.compatMode == 'BackCompat') {
                    $mydialog.height($mydialog.height() - 6);
                }
                else {
                    $mydialog.height($mydialog.height() + 1);
                }
            } 
        }
};

$mydialog.dialog({
        autoOpen: true,
        modal: true,
        resizeStop: fns.adjustSize,
        dragStop: fns.adjustSize
    });

Unfortunately you will have to do this on every call of $(element).dialog({...});

What do you think about this jQuery bug? Or you have a fix for this? Let me know.

Please share this article!