The Great WebKit Comparison Table

On this page I compare WebKits in order to prove that there is no “WebKit on Mobile” and to figure out which one is the best. My hope is that eventually I’m going to gain some insight in the “family tree” of all WebKits.

This page only contains tests of CSS and JavaScript items that work in some WebKits but not in all. Adding more items, all of which are either supported by all or by none of the WebKits, makes no sense — it’s in the items in the table below that the differences between the tested WebKits lie.

I will probably add some HTML5 items to this list later on, provided they’re supported by at least one WebKit (probably Safari or Chrome).

These tests focus solely on compatibility. I say nothing about performance or user interface, and especially on mobile these factors may, in the short run, be more important than compatibility.

And remember:

There is no “WebKit on mobile!”

So far I’ve tested a lot of mobile WebKits, and they are all slightly different. You can find the details below.

The table

The comparisons are sorted according to support, with the best-supported items coming first.

Test	Symb 1	Symb 2	Symb 3	S40	iOS 2.2	iOS 3.1	iOS 4.2	And 1.0	And 1.6	And 2	And 3	Dolfin	BB 6	BB PB	Phantom	Palm 2.0	Palm 2.1	Bolt 1.5	Ozone 0.9	Obigo 10	WeTab
+ selector	Static				Static	Yes		Static	Yes			Yes				Yes		Yes
+ selector	Static The browser doesn’t correctly update the styles of the original element when another element is placed before it.
Acid2 Test Score in the Acid2 test	Minimal				To be tested	Almost		Incorrect		Incomplete	Incorrect	Incorrect			Almost	Incomplete		Incomplete		Yes	Almost
Acid2 Test Score in the Acid2 test	If any solid red background appears the browser is Incorrect or worse.
Acid3 Test Score in the Acid3 test	Fail	47		Fail	74	100		72	92	93	100	98	100		91	69	92	76	93	93	100
Acid3 Test Score in the Acid3 test	Android 1.6 scores 93 points instead of 92. 100: Yes 91-99 : Almost 71-90 : Alternative 51-70: Incomplete 31-50 : Incorrect 11-30 : Minimal 0-10 : No Obigo WK encounters an unsupported media type after getting 69 points. Remove the error message, wait for a few seconds, and it will resume the test and end up at 93 points. Palm 2.1 does something similar, although you don’t have to remove the error message.
Animations	No				Yes			To be tested	Yes			Yes			Almost	Incomplete	Yes	n/a	No	Incomplete	Yes
Animations	LG doesn’t support rotation. Obigo doesn’t support transformations. The animation works, but not very beautifully. Palm 2.0 supports transformations, but not animations.
background-origin	No				No		Yes	No		Yes		Yes			-webkit-	Yes		Yes	Buggy	Yes
background-origin
box-sizing	No	-webkit-		Yes	-webkit-			-webkit-			Yes	-webkit-				-webkit-		-webkit-
box-sizing	Android has serious problems with widths of elements. However, within the constraints of that bug `box-sizing` works correctly.
clientX/Y	Yes				Incorrect		To be tested	To be tested		Yes		Incorrect	Yes		Incorrect	Incorrect		n/a	To be tested	Yes	Incorrect
clientX/Y	Incorrect Browser returns value of `pageX/Y`.
compareDocumentPosition()	No				No		Yes	No	Yes			Yes				Yes		Yes	No	Yes
compareDocumentPosition()	x.compareDocumentPosition(y) Compares the document (DOM) position of element `y` to that of element
elementFromPoint()	Yes	Incorrect			Yes	Untestable		Incorrect			Yes	Yes				Yes		Untestable	Incorrect	Yes
elementFromPoint()	document.elementFromPoint(100,100) Which coordinates does `elementFromPoint()` need? IE and Firefox need `clientX/Y`, so it's only a matter of time before that becomes the standard. Incorrect Browser requires `pageX/Y`
:enabled, :disabled and :checked	No	Almost	Yes		Yes			not :checked				Yes	not :checked		Yes	Yes		Incomplete	Yes	not :checked	Yes
:enabled, :disabled and :checked	Symbian 2: Doesn’t work on radios. Bolt doesn’t support `:disabled` and doesn’t remove the `:checked` styles when the boxes are unchecked.
:first-child	Static				Static	Yes		Yes				Yes				Yes		Yes
:first-child	Static The browser doesn’t correctly update the styles of the original element when another element is placed before it.
:focus	Yes			No	Buggy		Yes	No		Yes		Yes				Yes		No	Yes
:focus	iPhone doesn’t put the focus on the field. Once you’ve clicked on the field (and it has gotten the correct :focus styles) you have to click it again, or your typed text won’t appear. This is caused by the width change.
geolocation	No				No	Yes		No		Yes		Yes	Incomplete	Yes	Incomplete	Incomplete		No		Incomplete	No
geolocation	Incomplete Browser doesn’t return the actual coordinates.
getElementsByClassName()	No				Yes			Yes				Yes				Yes		Yes
getElementsByClassName()	document.getElementsByClassName('test') document.getElementsByClassName('test test2') The first expression returns a nodeList with all elements that have a `class` value that contains "test". The second one returns a nodeList will all elements that have a `class` value that contains both "test" and "test2" (in any order).
:last-child	Buggy	No		Buggy	Static		Yes	Yes				Yes				Static		Yes
:last-child	Buggy `last-child` styles also assigned to `first-child`. Static The browser doesn’t correctly update the styles of the original element when another element is placed after it.
localStorage	No				No	Yes		No		Yes		Yes				Yes		No	Yes
localStorage
:nth-child()	No				Yes			Incorrect		Yes		Yes				Yes		Incorrect		Yes
:nth-child()	Incorrect The browser gets totally confused in the dynamic test.
:nth-of-type()	No				Yes			Yes				Yes				Yes		Yes
:nth-of-type()	Incorrect The browser gets totally confused in the dynamic test.
:only-child	Static	No		Static	Yes	Static	Yes	Yes				Yes				Static		Yes
:only-child	Static The browser does not update the styles when elements are added dynamically.
opacity	No		Yes	No	Yes			No	Yes			Yes				Yes		No	Yes
opacity
overflow	Incorrect	Yes			Yes			Incorrect			Yes	Incomplete	Incorrect	Yes	Incorrect	Incorrect		Yes	Almost	Incorrect
overflow	Incorrect browser treats overflow: scroll and auto as hidden. The Nokia 5800 scrollbars are hard to use. Ozone treats overflow: scroll as overflow: auto. Samsung bada shows scrollbars, but doesn’t allow you to scroll. iPhone and LG WebKit require a two-finger drag to scroll overflowing layers.
querySelectorAll()	No				Yes			Yes				Yes				Yes		Yes
querySelectorAll()	document.querySelectorAll('.testClass') document.querySelectorAll('.testClass + p') Returns a nodeList with all elements that have a `class` value that contains "testClass"; or a nodeList with all paragraphs directly following such an element. Essentially, this method allows you to use CSS syntax to retrieve elements.
rows[]	Incorrect				Yes			Yes				Yes				Yes		Yes
rows[]	x.rows A nodeList with all rows of table `x`. Incorrect The browser keeps to the source code order, where the `<tfoot>` is the second row.
text-shadow	No				Yes			No	Yes			No	Incomplete	Yes	No	No		No		Yes	Incomplete
text-shadow	Incomplete No radius Palm Pre makes the shadowed text invisible.
Touch events	n/a	No			Yes			Yes				Yes				No		n/a		No	Yes
Touch events
Visual viewport	Yes				Yes			No			Yes	No	Yes		No	No		n/a	No	Yes
Visual viewport	The dimensions of the visual viewport are supposed to be stored in `window.innerWidth/Height`. See A tale of two viewports for the details.
wholeText	No				No	Yes		No	Yes			Yes				Yes		Yes
wholeText	This read-only property is useful if you want to get the entire text at a certain point and don’t want to be bothered by borders between text nodes.
Release year (non-scoring)	2005	2008	2010	2010	2008	2009	2011	2008	2009	2010	2011	2010	2010	2011	2010	2010	2011	2009	2009	2011	2011
Release year (non-scoring)	Based on data provided by Alex Russell.
WebKit version (non-scoring)	413	525	525	420	525	528	533	525	528	530	534	533	534	534	531	532	532	530	525	533	534
WebKit version (non-scoring)	This is mainly meant to prove that the WebKit version number is worthless when it comes to detecting browser capabilities.

Verdict

OK, so which WebKit is best? The table below gives the cumulative scores of all tested WebKits.

You can mine the data by selecting browsers. If you select one browsers you’ll see which other browsers are closest to it. If you select two browsers you’ll get a list of the exact differences between the two.


Browser	Better	Worse	Total

The scoring

I devised a scoring system that I will certainly tweak in the future, so scores of individual WebKits may change without notice. (In fact, I’m not even 100% sure that I should use a scoring system, but such hard facts look nice.)

The scoring works as follows, with unmentioned verdicts scoring 0 points:

Most tests are weighted as 1, but a few are weighted as 2 or 3. These weightings are indicated in the table.

Browsers that have no results for a test (either because I don’t have them available any more or because the test doesn’t apply to them) receive the average score of the browsers I could test. Some tests are mobile-only, and it would be unfair not to give Safari and Chrome points for these tests.