Question

I’m currently working on a table application heavily coded in javascript using jQuery.

When you click on a td cell jQuery pushes 2px solid black to the border property. Then on blur I remove the style attribute with removeAttr to make it revert back to the stylesheet settings. Works fine in IE9, but when I test it in Chrome, the left border resizes, but stays black.

The only thing that seems to get rid of this is opening the console. When I blur with the console open the style tag removes so I don’t understand why it’s still rendering a black border on the left. Any ideas?

EDIT: I’ve made a video showing the problem I’m experiencing.
http://www.youtube.com/watch?v=JCmYNOO5u4I

Here’s the code:

$("td.display").live('mouseenter', function () {
    $(this).addClass('selected');
}).live('mouseleave', function () {
    $(this).removeClass('selected');
});

The CSS is:

table TD.selected {
    border: 2px solid;
    border-color: Black;
}

Answer 1

Instead of using JavaScript to achieve this trivial effect, use CSS. The :hover pseudo-selector is well-supported in all modern browsers.

td.display:hover {
    border: 2px solid black;
}

I have adjusted your selectors, since <td> elements are always contained in a <table> element.

Demo: http://jsfiddle.net/JKM7e/

---

Update

This is one of the many table-css-related bugs in Chrome. A work-around is to initiate a re-render. To solve the issue, let Chrome render the page again. This fix should not activate in non-webkit browsers, so an additional variable is added.

I’ve also optimized your code, and replaced the deprecated live with on. The new revision can be found here.

// true if webkit, false otherwise
var isWebkit = !!$('<div style="-webkit-border-radius:1px">')[0].style.cssText.length;

$(document).on('blur', 'input.editCell', function () {
    var $thisParent = $(this).parent();      // <-- Optimizing by caching
    // Remove Highlight and bold around cell
    $thisParent.removeClass('selected');
    var colRow = $thisParent.attr('id').split('_');
    $('th:containsExactly(' + colRow[0] + ')').removeAttr('style');
    $('td.yAxis:containsExactly(' + colRow[1] + ')').removeAttr('style');
    // Change class back to display
    $thisParent.attr('class', 'display');
    // Take the entered value and put it in the cell
    $thisParent.html(this.value);
    // if(isFunction(this.value) === 'SUM')

    if (isWebkit) { // Fix for Webkit bug: render the table again
        // Without jQuery, for efficiency
        var style = document.getElementById('spreadsheetTable').style;
        style.color = '#111';                       //<--1. Change style 
        setTimeout(function(){style.color='';}, 4); //<--2. Fix
    }
});