Webkit: Overflow vs. Float (Block with auto margins joining a float)

HTML & CSS
1

Hi Gurus,
I have just ran some tests after running into some behavior from Webkit that does not act as I would expect it too.

This test case is a follow up from This Thread.

When a float comes before a “fixed width element with auto margins and overflow property” Webkit ignores the overflow property.

This test case uses a typical wrapper div with a fixed width and auto margins. Then overflow:hidden/auto; is applied as typically done. All browsers do give various results but when space is no longer available. However, all browsers besides webkit center the block between the viewport edge and the float’s inner edge.

http://www.css-lab.com/bug-test/webkit-float.html

Give me your thoughts on this please, I am calling it a Webkit bug at this point. Though it may be one of those gray areas in the specs as to how the UA should handle it. I can’t seem to find a clear explanation on how overflow should react in this situation.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Webkit Test: Overflow Div with Auto Margins Joining a Float</title>

<style type="text/css">

body,html {
    height:100&#37;;
    margin:0;
    padding:0;
    font-weight:bold;
}
#float {
    float:right;
    width:250px;
    height:200px;
    background:red;
}
#wrapper {
    width:750px;
    min-height:100%;
    margin:0 auto;
    padding:0 10px;
    overflow:hidden;/*contain floats*/
    background:lime;
}
ul{
    float:left;
    margin:10px 0;
    padding:10px;
    list-style-position:inside;
    background:#CDF;
}
h1 {background:yellow}
.clear {clear:both}
</style>
</head>
<body>

<div id="float">Float</div>
<div id="wrapper">
    <h1>Testing Webkit: Chrome 4 &amp; Safari 4</h1> 
    <h2>Fixed width element with auto margins and overflow property joining a float.</h2>
    <h3>The following browsers center this div between the left viewport edge &amp; the right float's inner edge</h3>
    <ul>
        <li>Firefox 3.6 (block never drops, float slides accross when space runs out)</li>
        <li>Opera 10  (drops block below float when space is not available)</li>
        <li>IE 7-8  (drops block below float when space is not available)</li>
    </ul>
    <h3 class="clear">Chrome 4 &amp; Safari 4 center this div in the viewport and ignore the float regardless of the overflow property.</h3>
    <p>This block does evetually drop in webkit but it rises back up after horizontal scroll comes into play. Reduce viewport width to test these results.</p>
</div>

</body>
</html>
2

After a little bit of searching I found an interesting discussion at css-discuss. But the subject is not exactly the same, it seems to be based on widthless overflow boxes with margins. However, they are getting a wide range of differences across all browsers.

overflow boxes next to floats

It is a fairly recent discussion and there is some strange behavior from all browsers mentioned in the discussion.

This is going to be related to 9.4.1 Block formatting contexts between floats and overflow boxes. I think that this is an undefined area of the specs and it seems to explain some of the different behaviors I was getting.

http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float

If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
This is another one of those “undefined areas” that is definitely enough to cause chaos since the UA seems to do as it pleases.