Ticket #4097 (closed bug: wontfix)
Infinite loop in IE8 release candidate 1 with OuterHeight and XHTML 1.1. Doctype
| Reported by: | bceverly | Owned by: | brandon |
|---|---|---|---|
| Priority: | major | Milestone: | 1.3.2 |
| Component: | dimensions | Version: | 1.3.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
I have been working with modal dialogs just fine using jQuery 1.3.1 and rc6 of jQuery UI. I'm pretty early stage in a UI redesign for our application so I'm testing the heck out of things on multiple browsers (IE6, IE7, IE8 beta2, FF 2, FF 3, Chrome, Opera 9.6, Safari) on multiple platforms (Windows, Mac, Linux) and everything was just fine.
I upgraded to release candidate 1 of IE 8 yesterday and have been stuck in modal dialog hell.
Basically, if I have no doctype, everything works fine. If I have an XHTML 1.1 doctype:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.1EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
I immediately go into an infinite loop in IE looping through code in jQuery 1.3.1. Specifically I seem to be hanging up on a call to this.uiDialog.outerHeight() in jquery.ui.all.js on line 7459. Since this is a core jQuery call, the folks on the UI message board asked me to post this information as a jQuery bug.
By the way, if I take the doctype off, everything works just fine. Here is my test.html file:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.1EN" " http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="/include/ui.all.css"></ link> </head> <BODY> <script type="text/javascript" src="/include/jquery-1.3.1.js"></ script> <script type="text/javascript" src="/include/jquery.ui.all.js"></ script> <script>
$(document).ready(function() {
Initialize the dialog
$("#dialog").dialog({
autoOpen: false, bgiframe: true, width: 400, height: 400, modal: true, buttons: {
Cancel: function() {
$(this).dialog('close');
}, 'Save': function() {
saveForm(); $(this).dialog('close');
}
}
});
Process the add button $('#add').click(function() {
$("#dialog").css("visibility", "visible"); $("#dialog").dialog("open"); return false;
});
});
</script>
Press the button<p /> <input id="add" type="button" Value="Go" />
<div id="dialog" style="visibility:hidden">
<label for="field1">Field 1:</label><input type="text" id="field1" /
<p />
<label for="field2">Field 2:</label><input type="text" id="field2" /
</div>
</BODY> </HTML>
Any help at all would be appreciated.
Thanks!
Change History
comment:1 Changed 4 years ago by john
- Status changed from new to closed
- Resolution set to worksforme
comment:2 Changed 4 years ago by john
- Status changed from closed to reopened
- Resolution worksforme deleted
Ok, I have a working test case now: http://jsbin.com/ajuja
comment:3 Changed 4 years ago by john
A couple things I've discovered:
- It doesn't appear to have anything to do with outerHeight() (running that method alone doesn't have any negative effect).
- Opening a dialog on dom ready works just fine - if you try to load it after page load it hangs.
comment:4 Changed 4 years ago by john
- Status changed from reopened to closed
- Resolution set to wontfix
Wow - it took me too long to figure this out. So this is due to the resize event that's being bound in the UI dialog. Inside the resize event the height and width are computed - which cause a reflow to occur. In IE 8 RC1 (I've gotten word that this has since been fixed) a reflow *also* triggers another resize event. Thus an infinite loop is spawned going over and over. A fix is as simple as commenting out the line where the overlay resize event is bound in the dialog.
Like I said, supposedly they've fixed this already - let's sure hope so.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
I tried to duplicate this but was unable to: http://dev.jquery.com/~john/ticket/4097/
Any more input would be appreciated!