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 comment:1
| status: | new → open |
|---|
Changed March 15, 2012 03:24PM UTC by 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 comment:4
| resolution: | → wontfix |
|---|---|
| status: | open → closed |
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 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.