如何说服Firefox重绘CSS Pseudo-elements？

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

当动态更改类时,我遇到让Firefox更新网页的问题。

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.

我正在使用HTML表格元素。当用户单击表头中的单元格时,我的脚本在sorted_asc和sorted_des之间来回切换类。我有伪元素,它根据单元格当前所在的类添加箭头字形(向上或向下)。

.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.

问题是,当您再次单击单元格标题时,页面不会更新箭头...直到用户将鼠标移离元素。我认为这是一个bug,因为它在Safari中工作正常,而且我没有看到任何:我的CSS中的悬停标签或其他可能会干扰的条目。

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

以前有人见过这个,或者知道如何解决这个问题?

4 个解决方案

#1

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

这有点俗气,但是既然你正在使用javascript,请在更改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.

这将重新呈现布局并经常解决这些错误。但并非总是如此。

#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 append it back where it was.

这是2014年,此页面上提出的解决方案似乎都不起作用。我找到了另一种方法:从DOM中分离元素并将其追回到原来的位置。

#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).

您是否可以使用不同的CSS来完成同样的事情而不依赖于:after伪选择器?您可以简单地定义一个您根据需要对齐的背景图像(我假设您需要右侧的箭头)。

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.

我只是建议这个,因为我假设你没有特定的理由需要使用:after伪类。如果您确实需要使用它,请更新。

#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.

这个bug仍然可以在Firefox 58中触发。幸运的是,不透明技巧仍然有效。只要确保正确计时。您可能需要在不透明度更改之间设置超时。

#1