如何说服Firefox重绘CSS伪元素？

Question

动态更改类时，让Firefox更新网页时出现问题。

我正在使用HTML table元素。 当用户单击表标题中的单元格时，我的脚本在sorted_asc和sorted_des之间来回切换类。 我有伪元素，它根据当前单元格的类别添加一个箭头标志符号（向上或向下）。

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

问题是，当您第二次单击单元格标题时，页面不会更新箭头...直到用户将鼠标从元素上移开。 我认为这是一个错误，因为它可以在Safari中正常工作，并且我在CSS或其他可能不会造成干扰的条目中看不到任何:hover标记。

任何人以前都看过此书，或者知道如何解决此问题？

Answer 1

这是2014年，本页上的拟议解决方案似乎都无效。 我发现了另一种方法：将元素与DOM分离，然后将其附加回原处。

Answer 2

有点俗气，但是由于无论如何您都在使用javascript，因此请在更改className之后尝试执行以下操作：

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

这将重新渲染布局，并且通常可以解决此类错误。 并非总是如此。

Answer 3

您是否可以使用不同的CSS来完成相同的事情而无需依赖：after伪选择器？ 您也许可以简单地定义一个背景图像，然后根据需要进行对齐（我想您需要右侧的箭头）。

例如：

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

我只建议这样做，因为我认为没有特定的原因需要使用：after伪类。 如果您确实需要使用它，请进行更新。

Answer 4

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