The Breaking Float Bug is back!

Back in september of 2010 I wrote a blog post about the Breaking Float rendering bug I found in WebKit, the rendering engine backing the Safari, Chrome and Opera browsers. In april of 2013 the WebKit team landed a patch which would eventually end up in the browsers relying on WebKit. Case closed right? Well, not quitte…

Blink brought it back

blinklogo

Coincidentally, in the same month that the Breaking Float bug was fixed, Google forked WebKit into a new project called ‘Blink’. And the fix to the Breaking Float bug was not in the fork. Over time, the Chrome browser switched over to using Blink instead of WebKit, bringing back the issue in all it’s breaking glory.

Continue reading

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

WebKit Breaking Float Bug

Update: After being fixed in WebKit, this bug has resurfaced in Blink. Read the follow up post.

I found a pretty big bug in WebKit today. It seems like such a basic scenario that I can hardly believe that no one found it before… and maybe they have but I couldn’t find an open issue on the WebKit bug tracker that described it.

Scenario
The bug involves a floated div containing an inline element (a span in this case, but I confirmed this also for label and input) and another floated div. The inner floated div breaks to the next line, even though it shouldn’t.

This is the HTML markup for this bug scenario:

<div class="outer">
   <span>Breaking</span>
   <div class="inner">Float</div>
</div>

This is the stylesheet:

.outer {
   float: left;
}

.inner {
   float: left;
   margin: 0 8px 0 0;
}

This is the expected result:

Float Breaking

This is the actual result:

Breaking
Float


I have to say I was a bit surprised by this bug. I consider WebKit a very strong browser with excellent standards compliance, being on the cutting edge of web standards. WebKit was one of (if not the) first browsers to pass the Acid3 test for example. So for such a basic scenario to fail is a bit of a disappointment.

Suggested fix
It seems this bug can be fixed by changing the inline element to a block level element, but this has to be done in markup, just a CSS rule display: block won’t help. Another possible fix is removing the float: left rule from the outer container and replacing it with display: inline or display: inline-block.

Repro and bug report
I have created a demonstration page on my personal webspace that demonstrates this bug and reported it on the WebKit bug tracker. I hope they will fix it soon because it makes for yet another of those browser inconsistencies that makes our lives as web developers difficult.