Как я могу убедить Firefox перерисовать псевдоэлементы CSS?
У меня возникают проблемы с тем, чтобы Firefox обновлял веб-страницу, когда ее класс изменяется динамически.
Я использую HTML-элемент table. Когда пользователь щелкает ячейку в заголовке таблицы, мой сценарий переключает класс между sorted_asc и sorted_des. У меня есть псевдоэлемент, который добавляет глиф стрелки (указывающий вверх или вниз) в зависимости от того, к какому классу сейчас принадлежит ячейка.
.thead .tr .sorted_asc .cell:after {
content: ' \25B2';
}
Проблема в том, что когда вы щелкаете заголовок ячейки второй раз, страница не обновляет стрелку ... до тех пор, пока пользователь не отодвинется от элемента. Я думаю, что это ошибка, поскольку он отлично работает в Safari, и поскольку я не вижу тегов :hover в моем CSS или других записях, которые могут мешать.
Кто-нибудь видел это раньше или знает, как обойти проблему?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Это немного глупо, но, поскольку вы все равно используете javascript, попробуйте это после изменения className:
document.body.style.display = 'none';
document.body.style.display = 'block';
Это приведет к повторному рендерингу макета и часто решает подобные ошибки. Но не всегда.
Спасибо, это так мило! Рад, что мне помогли :)
Я хотел бы добавить, что в некоторых случаях (не уверен, когда) это, похоже, не работает, но изменение непрозрачности с помощью document.body.style.opacity = '0.99999'; document.body.style.opacity = '1';, похоже, помогло мне.
У меня проблема, когда анимация не работала в firefox. Я использовал класс переключения jquery, чтобы добавить класс к элементу, который изменил свою позицию. Я использовал переход все. В firefox не заработало. Но как только я добавил это исправление, оно начало работать.
Это приятно слышать! Приятно осознавать, что этот ответ все еще помогает людям после стольких лет.
Сможете ли вы использовать другой 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. Если вам все же нужно его использовать, обновите.
Сейчас 2014 год, и ни одно из предложенных на этой странице решений, похоже, не работает. Я нашел другой способ: отсоединить элемент от DOM и добавить его на место.
Ошибка все еще может быть вызвана в Firefox 58. К счастью, трюк с непрозрачностью также все еще работает. Просто убедитесь, что правильно рассчитали время. Возможно, вам потребуется установить тайм-аут между изменениями непрозрачности.
ну, это пару лет спустя, но если вы все еще рядом, я хочу еще раз поблагодарить вас :) это действительно помогло мне