Firefox table border bug

Click slowly and see

by defeo

HTML

<table></table>

CSS

/* Remove this star ↓ to show the correct
behavior in Firefox */
table { border-collapse: collapse; } /**/

td {
    height: 50px; width: 50px;
    border: solid medium black;
}

JavaScript

/*
    Click on the table cells, and see borders disappear
    
    In Firefox, bordres will magically reappear after some clicks. Scroll
    away, than back in, and see more weird behaviur.
*/

for (var i = 0; i < 20; i++) {
    document.querySelector('table').innerHTML += '<tr>';
}

Array.prototype.forEach.call(document.querySelectorAll('tr'), 
    function(r) { 
        for (var j = 0; j < 20; j++) {
            r.appendChild(document.createElement('td'))
            .onclick = function (e) {
                e.target.style.border = 'none';
            };
        }
    });