REGRESSION: elements with overflow:auto;float:left don't render inside LIs with list-style-type:none

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Ojan Vafai]

They render fine in Safari 4 beta, but not in nightlies. It's as if they have visibility:hidden.

Example page. There should be a div at the bottom with the text "DIV HERE".

http://www.plexode.com/cgi-bin/eval3.py#ht=There%20should%20be%20a%20div%20with%20the%20text%20%22DIV%20HERE%22%20below%20this%3A%0A%3Cul%3E%3Cli%20style%3D%22list-style-type%3Anone%22%3E%3Cdiv%20style%3D%22overflow%3Aauto%3Bfloat%3Aleft%22%3EDIV%20HERE%3C%2Fdiv%3E%3C%2Fli%3E%3C%2Ful%3E&ohh=1&ohj=0&jt=&ojh=0&ojj=0&ms=100&oth=0&otj=0&cex=0

[gonchuki]

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.

*OR*

- 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.

[Robert Hogan]

Both test cases supplied here render fine on Chromium 20. So closing as fixed.