Why :hover is so slow in webkit browsers over large numbers of DOM elements

Question

When there are numerous DOM loaded with javascript elements styled with :hover pseudo class (like a long table), the effect is rendered slow/laggy in Chrome & Safari. Firefox appears to handle the large number of rows with :hover fairly quickly compared with webkit.

For example, you can see the difference by generating 10,000 rows with a :hover effect. http://jsfiddle.net/jschin/VwmjT/

var table = document.createElement('table');

for (var i=0; i<10000; i++) {
    var r = document.createElement('tr');

    for (var j=0; j<3; j++) {
        var c = document.createElement('td');
        c.appendChild(document.createTextNode(i*j));
        r.appendChild(c);
    }

    table.appendChild(r);
}

document.getElementById('b').appendChild(table);

I know 10,000 rows is a bad idea. I know you should paginate. I am just curious as to the nature of why this is.

Answer 1

Seems like a bug in Webkit. Actually the bug was caused by this rule:

tr:nth-child(even) {
    background-color: #F8F9FC;
}

if you try to remove it Chrome surprisingly accelerates.

So i updated your fiddle http://jsfiddle.net/m3f4D/

UPDATE: It is a reported bug https://code.google.com/p/chromium/issues/detail?id=160212