Почему в firefox появляется баг после анимации?

Question

[istasiik]

В проекте заметил очень странный баг. Он появляется только в firefox. После нажатия на кнопку (после того, как анимация закончилась) при вводе курсора в кнопку и выводе из него он на секунду уменьшает размер и меняет цвет. Как будто возвращается в положение без класса active, который я добавляю в jquery. В чем может быть проблема? jsfiddle.net/zsry1xqb/18

Answer 1

[Алексей Шеин]

Мне кажется, дело в конфликте стилей .button:hover и кейфрейме active. В ховере у вас уменьшается min-width и меняется цвет на голубой, а в анимации, ширина постепенно увеличивается и цвет меняется на зеленый, что и происходит при наведении.

Comments

[istasiik]

Я пробовал убирать :hover вообще, проблема все равно остается

Answer 2

[Назар Мокринский]

Кончайте так писать, невозможно же дебажить, не говоря о том, что два div внутри button разделенных br это невалидно и просто жесть.
Сделайте нормальный пример, используйте content : attr(active) если меняете контент, засуньте всё в одну анимацию.
Очень похоже на баг в браузере, но пример у вас явно кривоватый, JS тут нужен ровно для того чтобы навесить один класс - всё.