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

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

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
  • 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.
No Yes To be tested Yes Yes Almost Incomplete Yes n/a No Incomplete Yes
  • 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.
No No Yes No Yes Yes -webkit- Yes Yes Buggy Yes
No -webkit- Yes -webkit- -webkit- Yes -webkit- -webkit- -webkit-

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

Yes Incorrect To be tested To be tested Yes Incorrect Yes Incorrect Incorrect n/a To be tested Yes Incorrect
Incorrect
Browser returns value of pageX/Y.
No No Yes No Yes Yes Yes Yes No Yes
x.compareDocumentPosition(y)

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

Yes Incorrect Yes Untestable Incorrect Yes Yes Yes Untestable Incorrect Yes
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
No Almost Yes Yes not :checked Yes not :checked Yes Yes Incomplete Yes not :checked 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 Static Yes Yes Yes Yes Yes
Static
The browser doesn’t correctly update the styles of the original element when another element is placed before it.
Yes No Buggy Yes No Yes Yes Yes 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 No Yes No Yes Yes Incomplete Yes Incomplete Incomplete No Incomplete No
Incomplete
Browser doesn’t return the actual coordinates.
No 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).

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

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

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

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

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.