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.

Note: I’m in the process of splitting this page into a desktop and a mobile one. The desktop one isn’t ready yet, but the mobile one is. My most recent browsers are treated only on the new page.

The table

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

Test	Saf 3.0 Win	Saf 3.1 Win	Saf 4.0 Win	Saf 5.0 Win	Chr 1	Chr 2	Chr 3	Chr 4	Chr 5	Symb 1	Symb 2	Symb 3	S40	iPhone 2.2	iPhone 3.1	And 1.0	And 1.6	And 2	Dolfin	BB 6	Phantom	Palm Pre 1.2.1	Bolt 1.5	Ozone 0.9
+ selector	Static		Yes		Static	Yes				Static				Static	Yes	Static	Yes		Yes			Static	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	Yes	Incomplete		Yes	Yes					Minimal				To be tested	Almost	Incorrect		Incomplete	Incorrect		Almost	Incorrect	Incomplete
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	39	75	100		79	100				Fail	47		Fail	74	100	72	92	93	98	100	91	1	76	93
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
Animations	No		Yes		No	Yes				No				Yes		To be tested	Yes		Yes		Almost	To be tested	n/a	No
Animations	LG doesn’t support rotation.
appcache Unfortunately you can’t do this test yourself	No		Yes		No				Yes	No				Yes		No		Yes	Yes			No	Untestable	Yes
appcache Unfortunately you can’t do this test yourself
background-origin	No		-webkit-	Yes	No	-webkit-	To be tested	Yes		No				No		No		Yes	Yes		-webkit-	To be tested	Yes	Buggy
background-origin
box-sizing	Yes	-webkit-			-webkit-					No	-webkit-		Yes	-webkit-		-webkit-			-webkit-				-webkit-
box-sizing	Android has serious problems with widths of elements. However, within the constraints of that bug `box-sizing` works correctly.
compareDocumentPosition()	No		Yes		No	Yes				No				No		No	Yes		Yes			No	Yes	No
compareDocumentPosition()	x.compareDocumentPosition(y) Compares the document (DOM) position of element `y` to that of element
elementFromPoint()	Incorrect			Yes	Incorrect			Yes		Yes	Incorrect			Yes	Untestable	Incorrect			Yes				Untestable	Incorrect
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	Yes				Yes					No	Almost	Yes		Yes		not :checked			Yes	not :checked	Yes		Incomplete	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	Yes			Yes					Static				Static	Yes	Yes			Yes			Static	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				Yes					Yes			No	Buggy		No		Yes	Yes			No	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			Incomplete	No				Yes	No				No	Yes	No		Yes	Yes	Incomplete		No	No
geolocation	Incomplete Browser doesn’t return the actual coordinates.
getElementsByClassName()	No	Yes			Yes					No				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	No	Yes			Yes					Buggy	No		Buggy	Static		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		Yes		No			Yes		No				No	Yes	No		Yes	Yes			No	No	Yes
localStorage
:nth-child()	No	Incorrect	Yes		Incorrect		Yes			No				Yes		Incorrect		Yes	Yes				Incorrect
:nth-child()	Incorrect The browser gets totally confused in the dynamic test.
:nth-of-type()	No	Yes			Yes					No				Yes		Yes			Yes				Yes
:nth-of-type()	Incorrect The browser gets totally confused in the dynamic test.
:only-child	No	Yes			Yes					Static	No		Static	Yes	Static	Yes			Yes				Yes
:only-child	Static The browser does not update the styles when elements are added dynamically.
opacity	Yes				Yes					No		Yes	No	Yes		No	Yes		Yes				No	Yes
opacity
overflow	Yes				Yes					Incorrect	Yes			Yes		Incorrect			Incomplete	Incorrect		Yes	Yes	Almost
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					No				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					Incorrect				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	Yes				No	Yes				No				Yes		No	Yes		No	Incomplete	No	Buggy	No
text-shadow	Incomplete No radius Palm Pre makes the shadowed text invisible.
Touch events	n/a				n/a					n/a	No			Yes		Yes			Yes			No	n/a
Touch events
Visual viewport	Yes				Yes					Yes				Yes		No			No	Yes	No	Test	n/a	No
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		Yes		No	Yes				No				No	Yes	No	Yes		Yes			No	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)	2007	2008	2009	2010	2008	2009	2009	2009	2010	2005	2008	2010	2010	2008	2009	2008	2009	2010	2010	2010	2010	2009	2009	2009
Release year (non-scoring)	Based on data provided by Alex Russell.
WebKit version (non-scoring)	522	525	531	533	525	530	532	532	533	413	413 / 525	525	420	525	528	525	528	530	533	534	531	525	530	525
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.