如何說服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中觸發。幸運的是，這種不透明技巧仍然有效。 只要確保正確的時間。 您可能需要在不透明度更改之間設置超時。