nasauber.de

Blog

Chrome can’t render essential HTML correctly

The Kiwi Browser isn’t maintaied anymore since some time (and it’s a shame). As more and more web pages cesaed to work with it, I had to look for an alternative. Cromite it is.

However, whilst looking at the interface of my local go-e-pvsd instance, I noticed a suspect font size deviation:

The go-e-pvsd interface, with p elements rendered too big

Notice the font size of the <p> content between the two tables being larger!

This was really odd, as no font size setting was changed at any place. So I tried to strip it down to a minimal example. This wasn’t apparently too easy, the base HTML framework filled with placeholder strings was rendered correctly. So I thought this must be caused by some weird jQuery stuff or whatever. But no – finally I could produce a working really minimal example triggering the problem, and here, it was clear that this is caused by a bug in Chrome/Chromium.

Take the following minimal HTML: 

<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>We need some header</h1>
<table>
<tr><td>Some table</td><td>where the content doesn't matter.</td></tr>
</table>
<p>Some text inside the first p</p>
<p>The content of this p has to be long enough to trigger the bug</p>
</body>
</html>

No JavaScript. No style sheet. No font size settings. Pure minimal HTML. The rendered version looks like this (the screenshots link to the respective HTML files):

A minimal example triggering chrome’s font size rendering bug

The font of the two <p> elements is – absurdly – rendered bigger than the table’s. But now comes the interesting part: If some of the content is changed, this is not the case anyore! E.g. leave out the header:

The font size is rendered similarily without a header

Or change the content of the second <p>:

The font size is rendered similarily with shorter content in the second p

What the actual f…?! This is no crafty, hypothetical special CSS corner-case to test a browser’s skills, this is the most basic HTML I can imagine! Internet Explorer did this correctly back in the 90s! And the mighty Chrome Engine, the only HTML engine left besides Firefox and WebKit, base for almost all browsers out there, maintained by a multi-billion dollar company, struggles to render this?!

This is indeed remarkable. Well, I filed a bug report about this … let’s see what happens.