Kilian Valkhof

On rendering engines and graphic libraries

It won’t be long before we have a really solid baseline across the 4 major rendering engines in terms of CSS support. Gecko, Webkit, Presto and IE8’s rendering engine. But what about their graphic libraries?

Graphic libraries exist to take the page from the rendering engine and onto the screen. They’ve been underexposed for some time because the rendering engines caused the most grief, but with those getting rapidly better, little annoyances with the graphic libraries start to appear.

Google Chrome #

When Google announced Google Chrome and it turned out to use the Webkit rendering engine, I think everyone collectively sighed in relief. Not yet another browser to support! Well, that was until it became known that Google Chrome actually doesn’t support a lot of Webkit’s more advanced CSS stuff such as text-shadow or transformations. The reason for this is called Skia.

Skia is the graphic library Google Chrome uses. Webkit renders the page and then Skia actually paints it on the screen. All fair and well, but Google Chrome is the only browser to use Skia. Safari, which also used Webkit, uses the Core Image libraries. So while you may expect that the stuff that works in Safari also works in Google Chrome, that won’t always be the case. The result: Same rendering engine, different looking sites.

Firefox #

Another example: Firefox uses the Gecko rendering engine. It used to use the Pango graphics library but some time ago they switched to Cairo, which dramatically improved Firefox’s graphic rendering. However because of Cairo, fixed elements, when viewed on Linux, jitter. If you’re on Linux, and scroll this website, the top right background jitters. Very annoying, especially since this doesn’t happen on Mac or Windows. This isn’t a problem of gecko, but of Cairo having to (re)paint the site on the screen.

So what does this mean? #

Do we all have to buckle up for a new era of browser hacking and working around more and more cross-graphic-libraries oddities? No, I don’t think so. I don’t think this will really become a big problem.

However, very few people know about the how and why of these differences. As a front-end developer it will help you build better websites if you do. So will you?