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)!