AccordionContainer: IE6+7 overflow:auto visible content

[dante]

There is a quirk in the AccordionContainer only visible in IE6 and 7 - Putting any size content in a non-selected pane causes that pane to display it's content outside of the scroll area. The scrollbar is still visible and sized properly, but does not scroll anything (until focus, or interaction with the widgets inside)

One of our tests seem to display unselected panes with overflow, and not this issue in IE6/7 there, but the attached test does. At first I thought it was related to Widgets inside the Pane in markup, but stripping attached case to a simple looong UL displays the error too.

Attached is a test case demonstrating this failure. Inline the test case is a single line of css that fixes it, so you'll have to comment out .dj_ie .dijitAccordionBody { selector in head.

[dante]

simple accordion example with fix inline

[dante]

for reference, I was altered to this test via the forums: ​http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/accordion-rendering-issues-ie

and found the simple explanation about the quirk here: ​http://rowanw.com/bugs/overflow_relative.htm

I tested ie6,7 ff3 and safari. the IE's are the only problem children.

[dante]

(In [14239]) fixes #7104 - fixing overflow jankyness for a quirky browser. tested ie6 + 7, and regression check in ff3 + safari 3.1

[bill]

Note that [14239] was removed in [15913], but IE still seems to be working fine (presumably to the refactor). I did reproduce the problem in the attached test case against 1.1, when opening Pane 3.

FF3, however, is broken with a similar issue, see #8786.