Skip to main content

Search and Top Navigation

#8021 closed bug (wontfix)

Opened January 16, 2012 08:55PM UTC

Closed April 15, 2012 06:57PM UTC

Last modified August 07, 2012 11:05AM UTC

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:
Description

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.

Attachments (0)
Change History (5)

Changed January 16, 2012 09:46PM UTC by scottgonzalez comment:1

status: newopen

Changed January 16, 2012 09:46PM UTC by scottgonzalez comment:2

Possibly related to #6720.

Changed March 15, 2012 03:24PM UTC by scottgonzalez comment:3

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

Changed April 15, 2012 06:57PM UTC by scottgonzalez comment:4

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.

Changed August 07, 2012 11:05AM UTC by hero.wanders comment:5

_comment0: 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: \ \ {{{#!css \ .ui-tabs .ui-tabs-hide { \ display: inline-block !important; \ overflow: hidden !important; \ visibility: hidden !important; \ float: right !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.1344416934037031
_comment1: 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: \ \ {{{#!css \ .ui-tabs .ui-tabs-hide { \ display: inline-block !important; \ overflow: hidden !important; \ visibility: hidden !important; \ float: right !important; \ height: 0 !important; \ width: 0 !important; \ padding: 0 !important; \ margin: 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.1344418006785615
_comment2: 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: \ \ {{{#!css \ .ui-tabs .ui-tabs-hide { \ display: inline-block !important; \ overflow: hidden !important; \ visibility: hidden !important; \ position: absolute !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.1344591384335391
_comment3: 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: \ \ {{{#!css \ .ui-tabs .ui-tabs-hide, .ui-tabs .ui-tabs-hide * { \ display: inline-block !important; \ overflow: hidden !important; \ visibility: hidden !important; \ position: absolute !important; \ min-height: 0 !important; \ min-width: 0 !important; \ height: 0 !important; \ width: 0 !important; \ } \ }}} \ \ '''EDIT''': Fixed the CSS such that JQuery's is(':hidden') works. \ \ 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.1344591544949981
_comment4: 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: \ \ {{{#!css \ .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; \ } \ }}} \ \ '''EDIT''': Fixed the CSS such that JQuery's is(':hidden') works. \ \ 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.1344591900680525

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.