Как я могу убедить Firefox перерисовать CSS псевдоэлементы?

Question

У меня проблемы с получением Firefox для обновления веб-страницы при динамическом изменении его класса.

Я использую элемент HTML table. Когда пользователь щелкает ячейку в заголовке таблицы, мой сценарий переключает класс назад и вперед между sorted_asc и sorted_des. У меня есть псевдоэлемент, который добавляет глиф со стрелкой (указывающий вверх или вниз) в зависимости от того, к какому классу относится ячейка.

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

Проблема в том, что при повторном щелчке по заголовку ячейки страница не обновляет стрелку ... до тех пор, пока пользователь не проведет мышью от элемента. Я думаю, что это ошибка, так как она хорошо работает в Safari, и я не вижу никаких тегов :hover в моем CSS или других записей, которые могут помешать.

Кто-нибудь видел это раньше или знает, как обойти эту проблему?

Answer 1

Это 2014 год, и ни одно из предложенных решений на этой странице не работает. Я нашел другой способ: отсоединить элемент от DOM и добавить его туда, где он был.

Answer 2

Это немного глупо, но так как вы все равно используете javascript, попробуйте это после того, как вы изменили className:

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

Это переопределяет макет и часто устраняет ошибки такого рода. Хотя не всегда.

Answer 3

Ошибка все еще может быть вызвана в Firefox 58. К счастью, уловка непрозрачности также все еще работает. Просто убедитесь, что время правильно. Возможно, вам потребуется установить тайм-аут между изменениями непрозрачности.

Answer 4

Сможете ли вы использовать другой 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. Если вам нужно использовать его, пожалуйста, обновите.