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 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.