Bug 24441 - REGRESSION: elements with overflow:auto;float:left don't render inside LIs with list-style-type:none
Summary: REGRESSION: elements with overflow:auto;float:left don't render inside LIs wi...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh OS X 10.5
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2009-03-06 18:32 PST by Ojan Vafai
Modified: 2012-10-02 12:05 PDT (History)
3 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Comment 1 gonchuki 2011-09-08 19:20:13 PDT
seeing that the link below is dead and this is still an issue I'm adding a jsfiddle test case: http://jsfiddle.net/gonchuki/SnweK/

just confirmed that this still happens on Chrome 13 & 14, Safari 5.1 and Android 2.2 so it's widespread on all platforms that use WebKit (I will assume that iOS is also affected)

two workarounds that force the browser to render correctly are:
- add "position: relative" to each child of the <li> element. Only the elements with relative are rendered, the others remain invisible.


- add an element that does not float (basically, an element with layout). this is probably key for this bug as the render issue only happens when all the children of the <li> have a float. do also note that the form elements are actually there: the text cursor is shown over the input and you can even type and the value is correctly updated in the DOM element properties (you get the on-screen keyboard on Android too), and the select element displays its options when you click on it.
Comment 2 Robert Hogan 2012-10-02 12:05:59 PDT
Both test cases supplied here render fine on Chromium 20. So closing as fixed.