Category Archives: Browsers

WebKit Overflowed Float Bug

Posted on by Stijn de Witt

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

Equals operator not symmetric in IE8?

Posted on by Stijn de Witt

Today I stumbled on the weirdest bug. It seems that the equals operator (==) is not symmetric in IE8.
Meaning that sometimes, even though a == b yields true, b == a will yield false.
I discovered one such scenario when working on my project Packages JS.

Have a look at my test page. Does your browser handle it correctly?
Please leave a comment here with Browser and OS version and test result. I am curious about other browsers and versions.

WebKit Breaking Float Bug

Posted on by Stijn de Witt

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.