Opened 6 years ago

Closed 6 years ago

#9434 closed bug (notabug)

Tabs: Broken in IE11

Reported by: pwrelkin Owned by:
Priority: minor Milestone: none
Component: ui.tabs Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description

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>

Change History (5)

comment:1 Changed 6 years ago by 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.

comment:2 Changed 6 years ago by tj.vantoll

Status: newopen
Summary: IE11 Tabs brokenTabs: Broken in IE11

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?

comment:3 Changed 6 years ago by 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;
			}
		}

comment:4 Changed 6 years ago by tj.vantoll

Thanks pwrelkin, that helps a lot.

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

comment:5 Changed 6 years ago by Scott González

Resolution: notabug
Status: openclosed

Closing based on update in the core ticket.

Note: See TracTickets for help on using tickets.