Opened 8 years ago

Closed 8 years ago

Last modified 7 years ago

#8021 closed bug (wontfix)

Tabs: Ordered List bug in IE 9

Reported by: rspurrell Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:


jsFiddle Link:

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


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.


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.

Change History (5)

comment:1 Changed 8 years ago by Scott González

Status: newopen

comment:2 Changed 8 years ago by Scott González

Possibly related to #6720.

comment:3 Changed 8 years ago by 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.

comment:4 Changed 8 years ago by Scott González

Resolution: wontfix
Status: openclosed

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.

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

Last edited 7 years ago by hero.wanders (previous) (diff)
Note: See TracTickets for help on using tickets.