CODEWITHSUNDEEP
javascripthtmlcssfirefox
username
username

Reputation: 19630

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

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?

Upvotes: 3

Views: 3555

Answers (4)

Jakob Thorsdal Asmussen
Jakob Thorsdal Asmussen

Reputation: 1

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.

Upvotes: 0

Louis Ameline
Louis Ameline

Reputation: 2889

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.

Upvotes: 4

msingleton
msingleton

Reputation: 115

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.

Upvotes: 0

I.devries
I.devries

Reputation: 8916

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.

Upvotes: 4

Related Questions