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
Static Yes Static Yes Static Static Yes Static Yes Yes Static 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 Minimal To be tested Almost Incorrect Incomplete Incorrect Almost Incorrect Incomplete

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

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
No Yes No Yes No Yes To be tested Yes Yes Almost To be tested n/a No
  • LG doesn’t support rotation.
Unfortunately you can’t do this test yourself No Yes No Yes No Yes No Yes Yes No Untestable Yes
No -webkit- Yes No -webkit- To be tested Yes No No No Yes Yes -webkit- To be tested Yes Buggy
Yes -webkit- -webkit- No -webkit- Yes -webkit- -webkit- -webkit- -webkit-

Android has serious problems with widths of elements. However, within the constraints of that bug box-sizing works correctly.

No Yes No Yes No No No Yes Yes No Yes No
x.compareDocumentPosition(y)

Compares the document (DOM) position of element y to that of element

Incorrect Yes Incorrect Yes Yes Incorrect Yes Untestable Incorrect Yes Untestable 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
Yes Yes No Almost Yes Yes not :checked Yes not :checked Yes Incomplete Yes
  • Symbian 2: Doesn’t work on radios.
  • Bolt doesn’t support :disabled and doesn’t remove the :checked styles when the boxes are unchecked.
Static Yes Yes Static Static Yes Yes Yes Static Yes
Static
The browser doesn’t correctly update the styles of the original element when another element is placed before it.
Yes Yes Yes No Buggy No Yes Yes No No Yes

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.

No Incomplete No Yes No No Yes No Yes Yes Incomplete No No
Incomplete
Browser doesn’t return the actual coordinates.
No Yes Yes No 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).

No Yes Yes Buggy No Buggy Static Yes Yes Static Yes
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.
No Yes No Yes No No Yes No Yes Yes No No Yes
No Incorrect Yes Incorrect Yes No Yes Incorrect Yes Yes Incorrect
Incorrect
The browser gets totally confused in the dynamic test.
No Yes Yes No Yes Yes Yes Yes
Incorrect
The browser gets totally confused in the dynamic test.
No Yes Yes Static No Static Yes Static Yes Yes Yes
Static
The browser does not update the styles when elements are added dynamically.

Yes Yes No Yes No Yes No Yes Yes No Yes
Yes Yes Incorrect Yes Yes Incorrect Incomplete Incorrect Yes Yes Almost
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.
No Yes Yes No 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.

Incorrect Yes Yes Incorrect 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.
Yes No Yes No Yes No Yes No Incomplete No Buggy No
Incomplete
No radius
  • Palm Pre makes the shadowed text invisible.
n/a n/a n/a No Yes Yes Yes No n/a
Yes Yes Yes Yes No No Yes No Test n/a No

The dimensions of the visual viewport are supposed to be stored in window.innerWidth/Height. See A tale of two viewports for the details.

No Yes No Yes No No Yes No Yes Yes No 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 2010 2008 2009 2009 2009 2010 2005 2008 2010 2010 2008 2009 2008 2009 2010 2010 2010 2010 2009 2009 2009

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

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.