Over a million developers have joined DZone.

Is WebKit too fast for its own good?

DZone 's Guide to

Is WebKit too fast for its own good?

· Web Dev Zone ·
Free Resource

Let me start by saying I have the utmost respect for the WebKit team, and all the amazing things they have delivered with their rendering engine. Also, very important, for putting pressure on other rendering engine vendors and making them step up.

What I would like to talk about today is the rendering speed in WebKit. As we all know, it is very fast and has gotten very good standards support, combined with a number of new exciting features.

But, as of lately, when testing a couple of web sites I have worked on, I have experienced rendering glitches in both Google Chrome and Safari (both based on WebKit). Or rather, inconsistencies. It always loads very fast, but it’s just that things might look weird (as in things not positioned exactly where expected, miscalculated height values in script after the DOMContentLoaded event has fired (which naturally depends on each web browser’s JavaScript engine of choice) etc), and then after a reload, all those problems go away. It’s also hard to recreate these issues since they don’t happen every time, but just occasionally.

Let me be the first to say that it might just be my code that sucks, that I should try another approach in some scenarios and that there’s no more to it. However, these web sites/pages have never once shown any inconsistencies in Firefox or even Internet Explorer, which does makes me wonder.

Currently we have a performance war between web browsers, and we all know that rendering speed is a quite important part in creating a good end user experience. But, if this is at the cost of inconsistent rendering, I don’t want it, and it makes me wonder if the WebKit rendering is sometimes too fast for its own good?

Am I the only one who has experienced this, or have you seen this too?


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}