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

This is 2014 and none of the proposed solutions on this page seem to work. I found another way : detach the element from the DOM and append it back where it was.

Answer 2

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 3

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.

Answer 4

The bug can still be triggered in Firefox 58. Thankfully the opacity trick also still works. Just make sure to time it correctly. You might need to set a timeout between opacity changes.