How can I convince Firefox to redraw CSS pseudo elements?

Question

I am having problems updating a Firefox webpage when its class changes dynamically.

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

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

The problem is that when you click the cell title a second time, the page does not refresh the arrow ... until the user leaves the element. I think this is a mistake, since it works fine in Safari, and since I don't see any: hover over my CSS or other posts that might interfere.

Has anyone seen this before or knows how to get around this problem?

Answer 1

It's kind of crappy, but since you use javascript anyway, try this after you change the class name:

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

This will lead to a re-display of the layout and often solves such errors. Not always.

Answer 2

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 add it to where it was.

Answer 3

Can you use different CSS to do the same without relying on: after the pseudo selector? You can simply define a background image that you will align as needed (I assume you need an arrow on the right side).

For instance:

 .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 suggest this only because I assume that there is no specific reason why you need to use it: after the pseudo-class. If you need to use it, please upgrade.

Answer 4

The error can be triggered in Firefox 58. Fortunately, the opacity trick also still works. Just make sure it is correct. You may need to set a timeout between opacity changes.