Dialog: shrinks on drag in IE in standards mode, worse in quirksmode

[acwhite]

Hello,

I'm running into what seems to be a bizarre bug involving draggable/resizable JQueryUI 1.8.4 dialog boxes, the HTML 4.01 Transitional DTD, and Internet Explorer 8.

I have no problems getting the dialog to open and display normally, but it "shrinks" upward by about 5 pixels every time I click and drag it around, to the point that the buttons at the bottom of the dialog are eventually cut off completely (and if I resize the box, they're still gone.) If I don't specify a HEIGHT attribute when creating the dialog, the "shrinking" still occurs, but the dialog snaps back to its original height after I finish dragging it ... *unless* I've resized the dialog at any point, in which case it stays shrunk just as if I'd specified a height in the first place.

Changing the DOCTYPE in the headers from "DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN" to "DOCTYPE html" eliminates the problem, but since a number of other widgets in our site rely on using 4.0.1 Transitional, I'd rather not have to go back and retrofit everything else if at all possible. The issue also appears to be exclusive to IE, as everything works just fine in Firefox and Chrome.

I don't think it has anything to do specifically with my code or any code elsewhere on our site, as I was able to replicate the problem with a fresh download of JQuery UI 1.8.4 just by going into the index.html file and changing the DOCTYPE accordingly.

Is this a known problem? I've been searching for answers all afternoon and was surprised not to find any; it seems like the sort of thing someone else would have encountered by now. I'm hoping that means there's a quick and easy fix for it that I'm just not thinking of.

Thanks very much for any help you can provide!

[rdworth]

Found this issue occurs in both standards mode and quirkmode in IE, but is much more pronounced in quirksmode. Only 1px change in IE8 using the attached tespage 5916_standards.html whereas 5916_quirks.html has a 10px shrink on each drag.

Steps to reproduce:

1. drag the dialog a few pixels
2. notice the dialog shrink
3. repeat

[fracmak]

I'm not going to look into the quirks mode issue because both jquery and jquery ui both have the policy of not supporting quirks mode. As for the standards mode issue, this is caused because the padding of the dialog is a fraction of a pixel that IE ends up rounding up when calculating the height, this ends up calculating an inaccurate height when you consider both the top and bottom padding. The code currently grabs and resets the height of the dialog on each drag. I've made a pull request that removes that feature since it shouldn't be necessary since the height shouldn't change on drag.

​https://github.com/jquery/jquery-ui/pull/269

[Scott González]

The reason we set the height during drag is so that you can add a CSS rule that fades out the dialog and hides the dialog content. This is needed because fading out the dialog during a drag can cause performance problems based on the content of the dialog.

[Jay Merrifield]

Dialog: Removed the height() tinkering which stops the dialog from shrinking. Fixes #5916 - Dialog: shrinks on drag in IE in standards mode, worse in quirksmode.

Changeset: e34dbfeef013313dead74e39bea8adaa848310d4