I am using Happo in a project that uses Aphrodite for styling React
components. Aphrodite works by generating classes with styles that all
have !important on them. This ends up overriding our animation disabling
that we've set up here, since they both use !important and the
specificity on the classes will always be higher than the star selector.
My first attempt at fixing this issue involved adding some JavaScript
that looks through the Aphrodite stylesheet for animations and adding a
rule to the end of it to re-disable the animations. This seemed to work
in debug mode, but it still ended up capturing the animation at a
different frame when running Happo. I tried to work around this by
introducing a delay and forcing a repaint, but no amount of delay seemed
to help.
After a bit of digging, I discovered the animation-play-state CSS
property. This allows pausing and playing of animations. Since we aren't
using this style in our components (and it seems unlikely that we
usually would), adding this to our animation disabling code here
prevents the spurious diffs.
I decided to keep the animation-duration property here for cases where
one will work but the other will not.
I am using Happo in a project that uses Aphrodite for styling React components. Aphrodite works by generating classes with styles that all have !important on them. This ends up overriding our animation disabling that we've set up here, since they both use !important and the specificity on the classes will always be higher than the star selector.
My first attempt at fixing this issue involved adding some JavaScript that looks through the Aphrodite stylesheet for animations and adding a rule to the end of it to re-disable the animations. This seemed to work in debug mode, but it still ended up capturing the animation at a different frame when running Happo. I tried to work around this by introducing a delay and forcing a repaint, but no amount of delay seemed to help.
After a bit of digging, I discovered the animation-play-state CSS property. This allows pausing and playing of animations. Since we aren't using this style in our components (and it seems unlikely that we usually would), adding this to our animation disabling code here prevents the spurious diffs.
I decided to keep the animation-duration property here for cases where one will work but the other will not.