The Great WebKit Comparison Table

On this page I compare 19 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 19 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 10 different 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.

Palm Pre tests courtesy of Ben Combee. I will repeat the tests once I own a Palm Pre.

Test Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Chrome 3 Konq 3.5.7 Konq newer S60v3 S60v5 iPhone 2.2 iPhone 3.1 Android 1.0 Android 1.5 / 1.6 Bolt 1.5 Iris 1.1.9 Ozone 0.9 Palm Pre 1.2.1 JIL Emulator 1.5 Samsung H1/M1 WM
+ selector
 Static Yes Static Yes Yes To be tested Static Static Yes Static Yes Yes Static Yes Yes
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 To be tested Minimal To be tested Almost Incorrect Incomplete Almost Incomplete Incorrect Incorrect Incorrect

If any solid red background appears the browser is Incorrect or worse.

(Bolt 1.5)
Acid3 Test
Score in the Acid3 test 		39 75 100 79 100 Crash To be tested Fail 47 74 100 72 92 76 100 93 1 93 89

Android 1.6 scores 93 points instead of 92.

  1. 100: Yes
  2. 91-99 : Almost
  3. 71-90 : Alternative
  4. 51-70: Incomplete
  5. 31-50 : Incorrect
  6. 11-30 : Minimal
  7. 0-10 : No
appcache
Unfortunately you can’t do this test yourself 		No Yes No No To be tested Cache Yes No Untestable Cache Yes No Cache
Cache
Caching so aggressive that appcache is supported in practice. Still I count this as a bug: the cache should take page updates into account.
attributes[key]
 Yes Yes No To be tested No Yes Yes Yes Yes Yes Yes Yes 
x.attributes['align']
box-sizing
 Yes -webkit- -webkit- Yes To be tested No -webkit- -webkit- -webkit- -webkit- -webkit- -webkit- -webkit-

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 To be tested No No No Yes Yes No No Yes Probably 
x.compareDocumentPosition(y)

Compares the document (DOM) position of element y to that of element
contains()
 Yes Yes Yes To be tested Incorrect Yes Yes Yes Yes Yes Yes Probably 
x.contains(y)
Incorrect
The browser always returns true.
cssText
 Yes Yes No To be tested No Yes Yes Yes Yes Yes Yes Yes 
document.styleSheets[1].cssRules[1].cssText

Returns the entire text of the rule (for instance pre {font: 14px verdana;}).
elementFromPoint()
 Incorrect Incorrect No To be tested Yes Incorrect Yes Untestable Incorrect Untestable Incorrect Yes Incorrect Incorrect 
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 Yes To be tested No Almost Yes not :checked Incomplete Yes Yes not :checked Yes
  • S60v5: Doesn’t work on radios.
  • Can’t do the :checked test in Iris because I can’t check checkboxes or radios.
  • Bolt doesn’t support :disabled and doesn’t remove the :checked styles when the boxes are unchecked.
:first-child
 Static Yes Yes Yes To be tested Static Static Yes Yes Yes Static Yes Yes
Static
The browser doesn’t correctly update the styles of the original element when another element is placed before it.
:focus
 Yes Yes Yes To be tested Yes Buggy No No Yes Yes No Yes

Safari iPhone 2.2 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 No To be tested No No Yes No No No No No
getElementsByClassName()
 No Yes Yes No To be tested No Yes Yes Yes Yes Yes Yes 
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 Yes To be tested Buggy No Static Yes Yes Static Yes Yes
Static
The browser doesn’t correctly update the styles of the original element when another element is placed after it.
localStorage
 No Yes No No To be tested No No Yes No No Yes No No n/a
Media queries - width
 Static Yes Static Yes No To be tested No Static To be tested Yes Static Yes Yes Yes Yes Yes

Width according to document.body width and height; this may diverge from the viewport or the canvas or whatever.

Static
The browser doesn’t reinterpret the media queries after a resize.
Media queries - device-width
 Static Yes Static Yes No To be tested No Static To be tested Incorrect Static Yes Yes Incorrect Yes Yes
Static
The browser doesn’t reinterpret the media queries after a resize.
Incorrect
The browser always reports the portrait dimensions.
Media queries - orientation
 No Yes No Yes No To be tested No To be tested No No No No No To be tested
Static
The browser doesn’t reinterpret the media queries after a resize.
Media queries - device-aspect-ratio
 Yes Yes No To be tested No To be tested Incorrect Yes 1/1 Yes Incorrect Yes To be tested
Static
The browser doesn’t reinterpret the media queries after a resize.
Incomplete
The browser always reports the portrait dimensions.
:nth-child()
 No Incorrect Yes Incorrect Yes Yes To be tested No Yes Incorrect Incorrect Yes Incorrect Incorrect
Incorrect
The browser gets totally confused in the dynamic test.
:nth-of-type()
 No Yes Yes Yes To be tested No Yes Yes Yes Yes Yes Yes
Incorrect
The browser gets totally confused in the dynamic test.
:only-child
 No Yes Yes Yes To be tested Static No Yes Static Yes Yes Yes Yes Yes
Static
The browser does not update the styles when elements are added dynamically.
opacity
 Yes Yes No To be tested No Yes No Yes No Buggy Yes Yes Yes Yes

Iris makes the opaque box grey.
overflow
 Yes Yes Yes To be tested Incorrect Yes Yes Incorrect Yes Almost Incorrect Incorrect Yes
Incorrect
browser treats overflow: scroll and auto as hidden.
  • The Nokia 5800 scrollbars are hard to use.
  • Ozone treats overflow: scroll as overflow: auto.
position: fixed
 Yes Yes Yes To be tested Yes Incorrect Incomplete Incorrect Incorrect Incomplete Yes Incorrect Incorrect Yes
Incomplete
browser supports position: fixed, but the element behaves as if it has absolute while scrolling. After scrolling has finished it’s placed at the fixed position it belongs in.
Incorrect
browser treats position: fixed as position: absolute.
querySelectorAll()
 No Yes Yes No To be tested No Yes Yes Yes Yes Yes Yes 
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 To be tested Incorrect Yes Yes Yes Yes Yes Yes 
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 Yes To be tested No Yes No Yes No Incomplete No Buggy Yes Incomplete
Incomplete
No radius
  • Palm Pre makes the shadowed text invisible.
wholeText
 No Yes No Yes No To be tested No No Yes No Yes Yes No Yes Yes

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 2008 2009 2009 2007 ??? 2005 2008 2008 2009 2008 2009 2009 2008 2009 2009 2009 2009

Based on data provided by Alex Russell.
WebKit version
(non-scoring) 		522 525 531 525 530 532 ??? ??? 413 413 ??? 528 ??? 528 530 525 525 525 528 ???

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

To Do

The scoring

I’ve 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. I focus mainly on the mobile web; that’s why media queries are weighted so much. These weightings are indicated in the table.

These compatibility tables are sponsored by

Google