Kilian Valkhof

Front-end & user experience developer, Jedi.

On rendering engines and graphic libraries

Web, 10 November 2008, 2 minute read

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.


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?

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. It will never end! :(

    On the bright side, there is always something new to learn and play with :D

  2. Alex

    Interesting article, I’d never considered that.

    I think just getting away from IE6 & IE7 versions of Trident will be enough for me for a while.

  3. […] On rendering engines and graphic libraries […]

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

    You’re right! It happens sometimes on Linux… Now I know why.


  5. The Firefox 3.1 beta on Windows has it as well, At least the portable version I downloaded. Still annoying, but that at least means consistency cross system ;) And will probably cause me to stop using it.

  6. […] Salva e condividi questo articolo: Queste icone linkano i siti di social bookmarking sui quali i […]

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.