How can I convince Firefox to redraw CSS Pseudo-elements?

Question

I'm having issues getting Firefox to update a webpage when its class is changed dynamically.

I'm using an HTML table element. When the user clicks a cell in the table header, my script toggles the class back and forth between sorted_asc and sorted_des. I have pseudo element which adds an arrow glyph (pointing up or down) depending on which class the cell currently is.

.thead .tr .sorted_asc .cell:after {
    content: ' \25B2';
}

The problem is, that when you click the cell header a second time, the page doesn't update the arrow... until the user mouses away from the element. I think it's a bug as it works fine in Safari, and as I don't see any :hover tags in my CSS or other entries that might interfere.

Anyone seen this before, or know how to work around the issue?

Answer 1

It's kind of cheesy, but since you're using javascript anyway, try this after you changed the className:

document.body.style.display = 'none';
document.body.style.display = 'block';

This will re-render the layout and often solves these kind of bugs. Not always, though.