21 March 2011

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!

2 comments:

Anonymous said...

Hi, yeps, this was bugging me as well these days. A guy reported it here: http://bugs.jqueryui.com/ticket/5916, jQuery guy made a discussion here https://github.com/jquery/jquery-ui/pull/269. As a discussion they mention deleting any tempering with heights in _makeDraggable function. While that works for me, still I'm a bit confused why don't they do it. As much as I understood the problem is related to height() jQuery functions and some rounding problems on IE.

Anyways, thanks for posting your solution. I would like to somehow override their custom _makeDraggable instead of change in the ui code, still I'm not sure how to do it, best

Roman Gherman said...

hmm, thanks for your suggestion, I think it should be possible to override the code in uncompressed version of jquery UI, however you will need to take care at each release to update your override if something has changed.

I will probably try to do that later.

However I don't think it is possible to override the compressed version.

Post a Comment

your thoughts are welcome:

Need more? Leave comments and subscribe to my blog.

.