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.

Answer 2

Would you be able to use different CSS to accomplish the same thing without relying on the :after pseudo-selector? You might be able to simple define a background-image which you align as needed (I assume you would want the arrow on the right hand side).

For example:

.thead .tr .sorted_asc .sorted_asc {
  background: url(images/down_arrow.png) no-repeat right;
}

.thead .tr .sorted_asc .sorted_des {
  background: url(images/up_arrow.png) no-repeat right;
}

I only suggest this since I assume there isn't a specific reason why you need to use the :after pseudo-class. If you do need to use it, please update.