WebKit Overflowed Float Bug

Martijn Traa from Mindcontrolled.nl brought to my attention a bug in WebKit that seems to be related to the WebKit Breaking Float Bug I blogged about earlier.

Scenario
This bug involves a floated block level element containing inline elements. Spans inside a div in this case but it seems this is generic. All inline elements have a margin- or padding-left or -right greater than zero and the first inline elements contains some nested inline elements.

This is the HTML markup for this bug scenario:

<div class="outer">
	<span><b><i>Web</i>Kit</b></span>
	<span>Overflowed</span>
	<span>Float</span
</div>

This is the stylesheet:

.outer {
	float: right;
}

.outer span {
	margin-left: 20px;
}

This is the expected result:

     WebKit   Overflowed   Float

This is the actual result:

     WebKit   Overflowed
     Float

Suggested fix
It seems a number of fixes are possible. The one that should have least impact on the design is floating the inline elements (spans in this case) to the left.

Repro and bug report
I created a demonstration page on my personal web space for this bug. Martijn had already reported it on the WebKit bug tracker.

UPDATE
I just tested my demonstration page with Chrome 26.0.1410.43 m and it is now displaying correctly. From visiting the bug tracker it seems that a related bug was fixed which probably also fixed this one. Great! Reporting bugs helps (even though it can be a long wait)!

4 responses to “WebKit Overflowed Float Bug

  1. I have an even more bizarre case.

    in stylesheet.css:
    .outer{
    float:left;
    }
    .outer input{
    float:left;
    }

    html:

    The button changes the href attribute of the stylesheet in my head tag.
    When the page first renders, it looks (as expected) like

    [input] [submit]
    [button]

    but if you click the button twice, which restores the stylesheet, it looks like

    [input]
    [submit]
    [button]

    This happens even if you put an explicit width on .outer!!

  2. Sorry, html did not post. I shall attempt to escape my angle-brackets.

    <div class=”outer”>
    <input type=”text” />
    <input type=”submit” />
    </div>
    <input type=”button” onclick=”toggleStylesheet()” />

  3. The current workaround for this bug is the silliest line of jQuery I have written, since refreshing the page with the appropriate cookie will restore the format:

    if($.browser.webkit)
    {
    window.location = window.location;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s