#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: |
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:
- Click on Tab 3
- Click on Tab 2
- Click on Tab 1
- Click on Tab 2
- Repeat steps 1 through 5.
Change History (5)
comment:1 Changed 11 years ago by
Status: | new → open |
---|
comment:2 Changed 11 years ago by
comment:3 Changed 11 years ago by
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 11 years ago by
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.
comment:5 Changed 10 years ago by
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.
Possibly related to #6720.