Webkit Overflowed Float Bug

This page demonstrates a suspected bug in WebKit that makes inline elements inside a floated block overflow to the next line, even though there should be enough room left on the line they are expected to be at. The name is a pun at floats overflowing.

This issue was first discovered by Martijn Traa. a.k.a. 'Booster' from Mindcontrolled.nl.


WebKit Overflowed Float


In the example above, the word 'Float' is expected to remain on the same line as 'WebKit' and 'Overflowed' as long as the window offers enough room. In WebKit it breaks to the next line though.

The markup for this example is:

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

The style rules for this example are:

.outer {
	float: right;
}

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

This bug has been reported: Bug 57441 - A combination of float/margin/first-child causes strange behaviour.

This bug has been documented on and may be discussed at my blog: WebKit Overflowed Float Bug.

This bug seems to be related with: WebKit Breaking Float Bug.