Tabs: Broken in IE11

[pwrelkin]

In Internet Explorer 11 (Windows 8.1 Preview), you can only change the selected jQuery tab 3 or 4 times. After that, none of the tabs can be selected or displayed.

This bug was caused by the modifications to the "closest" function in 1.10.0. Reverting the "closest" function to 1.9.1 fixes this issue in 1.10.2.

I originally posted this as a core bug report since the "closest" function is located in the core file. They told me to post the report here.

PoC:

<link href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' rel='stylesheet'>
<script src='http://code.jquery.com/jquery-1.10.2.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<div id='tabs' style='font-size: 10pt;'>
  <ul>
  <li><a href='#tabs-1'>Try to</a></li>
    <li><a href='#tabs-2'>click on</a></li>
    <li><a href='#tabs-3'>each tab in</a></li>
    <li><a href='#tabs-4'>Internet Explorer 11</a></li>
    <li><a href='#tabs-5'>(Windows 8.1 Preview)</a></li>
  </ul>
  <div id='tabs-1'>Tab 1</div>
  <div id='tabs-2'>Tab 2</div>
  <div id='tabs-3'>Tab 3</div>
  <div id='tabs-4'>Tab 4</div>
  <div id='tabs-5'>Tab 5</div>
</div>
<script>
  $('#tabs').tabs();
</script>

[tj.vantoll]

Hi pwrelkin,

Thanks for taking the time to contribute to the jQuery UI project. Just fyi at the moment no one on the team has an IE11 testing setup. Once we do we'll take a look at this.

[tj.vantoll]

I confirmed this behavior in IE11 preview. I'll mark this as valid for the moment. It sounds like it's a core bug, but it's a major issue for the tabs widget.

pwrelkin, since you say that this is a problem with closest, could you create a test case that shows the issue without using the tabs widget?

[pwrelkin]

Here is an example of the bug without jQuery UI:

<script src='http://code.jquery.com/jquery-1.10.2.js'></script>
<ul id='found'>
  <li>"closest" only works between 17 and 19 times in Internet Explorer 11.</li>
</ul>
<script>
  for(var i = 1; i <= 50; i++) {
    document.body.innerHTML += i + ': ' + $('li').closest('#found').attr('id') + '<br>';
  }
</script>

The bug seems to be caused by the fix for this bug: ​http://bugs.jquery.com/ticket/13332

Replacing the for loop in "closest" with the code from version 1.9.1 fixes the problem:

		for ( ; i < l; i++ ) {
			cur = this[i];

			while ( cur && cur.ownerDocument && cur !== context && cur.nodeType !== 11 ) {
				if ( pos ? pos.index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
					ret.push( cur );
					break;
				}
				cur = cur.parentNode;
			}
		}

[tj.vantoll]

Thanks pwrelkin, that helps a lot.

I created a new core ticket for this ​http://bugs.jquery.com/ticket/14190.

[Scott González]

Closing based on update in the core ticket.