#4097 closed bug (wontfix)

Opened February 09, 2009 01:56PM UTC

Closed February 17, 2009 09:50PM UTC

Last modified March 09, 2012 12:04PM UTC

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>

</head>

<BODY>

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 />

<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!

Attachments (0)

Change History (4)

Changed February 16, 2009 04:22PM UTC by john comment:1

resolution:	→ worksforme
status:	new → closed

I tried to duplicate this but was unable to:

http://dev.jquery.com/~john/ticket/4097/

Any more input would be appreciated!

Changed February 17, 2009 07:07PM UTC by john comment:2

resolution:	worksforme
status:	closed → reopened

Ok, I have a working test case now:

http://jsbin.com/ajuja

Changed February 17, 2009 07:51PM UTC by john comment:3

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.

Changed February 17, 2009 09:50PM UTC by john comment:4

resolution:	→ wontfix
status:	reopened → closed

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.

Side navigation