Just finished creating an XKCD app for a MEAN stack class I'm enrolled in, and I'm almost done with it. However, there's this annoying visual bug that's bothering me, especially with the angular animations. Here is the link to my deployed app:
And here is the code: https://github.com/nevaldiv/project4_relevant_xkcd
The problem seems to be in my CSS, specifically in the animations.css file, but I'm not entirely certain.
CSS isn't really my area of expertise, so I'm quite clueless about it. For instance, when you click on the checkbox filter for 2008 repeatedly, do you notice that the ng-repeat divs seem to shift slightly to the right? They also leave a 'ghost' effect or trails as they move towards the left. What could be causing this? Could it possibly be something in the CSS outside of my angular-animations.css? How can I troubleshoot this issue when it occurs so quickly and then disappears? I believe I need someone experienced to take a look at it.
I've attempted to solve it myself but no matter how hard I try, I can't pinpoint the cause. Feel free to explore my app, although I couldn't integrate my token authentication properly (or connect my user model with my comics model), so what you see on the landing page is pretty much all there is to it for now.