It was fine on an isolated environment, but somehow the animation didn't appear on our page. I thought it was a configuration issue, so I copied and pasted the exact same config on our page. It didn't appear too. I was having trouble inspecting the styles because it isn't triggered semantically by CSS, rather by JS.
I inspected the source code, but every hover class was firing up properly. I tried it on a different page in the app, the animation is there. So something was causing it in the original page.
After painstakingly removing the components/modules in that page one by one, seeing which one causing the problem, I found out that there is a line of CSS that goes like this:
/*
* (a note about a bug its trying to fix)
*/.highcharts-series-hover{opacity:1!important;}
Basically this line says all Highchart series would have an opacity of 1, so even if the animation kicks in, this line overrides it (with the !important) so that it looks like there is no animation. Should've fixed the actual bug from the issue tracker...
And that concludes 3 hours of debugging. I think I didn't do a good job debugging it, any suggestions? 😂
On another note, how do you all prevent these kind of CSS bugs? Visual regression test? Eye test?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
The recent one was about Highcharts. You were supposed to have an animation when hovering the mouse on the legend.
jsfiddle.net/y92haq35 (somehow the fiddle can't be embedded)
It was fine on an isolated environment, but somehow the animation didn't appear on our page. I thought it was a configuration issue, so I copied and pasted the exact same config on our page. It didn't appear too. I was having trouble inspecting the styles because it isn't triggered semantically by CSS, rather by JS.
I inspected the source code, but every hover class was firing up properly. I tried it on a different page in the app, the animation is there. So something was causing it in the original page.
After painstakingly removing the components/modules in that page one by one, seeing which one causing the problem, I found out that there is a line of CSS that goes like this:
Basically this line says all Highchart series would have an opacity of 1, so even if the animation kicks in, this line overrides it (with the
!important) so that it looks like there is no animation. Should've fixed the actual bug from the issue tracker...And that concludes 3 hours of debugging. I think I didn't do a good job debugging it, any suggestions? 😂
On another note, how do you all prevent these kind of CSS bugs? Visual regression test? Eye test?