Tabs: Ordered List bug in IE 9

[rspurrell]

jsFiddle Link: ​http://jsfiddle.net/qHxhV/

Affected scenario

jQuery UI: 1.8.17, 1.8.16, 1.8.9, 1.8.7, 1.7.2
Browser: IE 9
OS: Windows 7 SP1

Unaffected scenario

jQuery UI: 1.8.17, 1.8.16, 1.8.9, 1.8.7, 1.7.2
Browser: Firefox 9.0.1, Chrome 16.0.912.75 m, IE 7, IE 8, Safari (iPhone)
OS: Windows Server 2003, iOS 5.0.1

Description

When navigating jQuery UI tabs the bullet number ordering of an html ordered list contained in tab content be will converted to all 0's when navigating tabs in a reverse order.

Instructions

Use the above jsFiddle with the affected scenario and perform the following steps in the result pane while taking particular notice to the content of tabs 1 and 2:

1. Click on Tab 3
2. Click on Tab 2
3. Click on Tab 1
4. Click on Tab 2
5. Repeat steps 1 through 5.

[Scott González]

Possibly related to #6720.

[Scott González]

Interestingly, unlike the accordion bug mentioned above, this does not affect IE 8. This is fixed in IE 10 PP4 10.0.8103.0.

[Scott González]

If anyone has a reasonable solution to this, we can land it, but IE just has some bizarre bugs that are mostly unrelated to anything we're actually doing.

[hero.wanders]

I couldn't see the bug in the jsFiddle demo but noticed it in my own project (not restricted to navigating backwards). For me using a CSS definition like the following fixed the numbering bugs in tabs:

.ui-tabs .ui-tabs-hide {
    display: inline-block !important;
    overflow: hidden !important;
    position: absolute !important;
}

.ui-tabs .ui-tabs-hide, .ui-tabs .ui-tabs-hide * {
    visibility: hidden !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

This replaces the default class which only says display: none !important;. Make sure it's placed after the CSS of JQuery UI if you choose to supersede the style instead of replacing it in the original CSS.

EDIT: Fixed the CSS such that JQuery's is(':hidden') works.