Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 8 years ago

#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:
Blocked by: Blocking:

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 (4)

comment:1 Changed 11 years ago by john

Resolution: worksforme
Status: newclosed

I tried to duplicate this but was unable to: http://dev.jquery.com/~john/ticket/4097/

Any more input would be appreciated!

comment:2 Changed 11 years ago by john

Resolution: worksforme
Status: closedreopened

Ok, I have a working test case now: http://jsbin.com/ajuja

comment:3 Changed 11 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 11 years ago by john

Resolution: wontfix
Status: reopenedclosed

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.

Note: See TracTickets for help on using tickets.