search

taw / magic-search-engine

Search engine for Magic cards
MIT License
47 stars 19 forks source link

Respect reduced motion setting when hovering over cards #125

Closed fenhl closed 3 years ago

fenhl commented 5 years ago

This CSS rule removes the animation from the hover interaction on special card layouts when an appropriate accessibility setting is enabled.

taw commented 5 years ago

It's probably legit but how do I test it?

fenhl commented 5 years ago

You have to enable reduced motion in your system accessibility settings (e.g. on macOS: System Preferences → Accessibility → Display → Reduce motion) and be on a compatible browser.

fenhl commented 5 years ago

There's some weirdness going on with split cards since hovering over them can move them away from your cursor, causing them to flicker between the two orientations when you move your cursor. The problem exists with the animation as well but is more obvious without it.

Possible fix: enable the transform not just when hovering over the card itself but also keep it active when hovering over a div that remains in the card's original position.

taw commented 5 years ago

Even regular split cards, if I mouseover top part of it, it goes crazy with this setting.

I think we'd need to do better than that. ( probably by making hovering over div also count )

taw commented 4 years ago

I added support for prefers-reduced-motion: reduce and changed hover logic so this split bug on corner mouseover doesn't happen anymore, with either motion settings.

As far as I can tell, it works everywhere, but if you have a moment to double check that, it would be useful.

taw commented 3 years ago

Closing as fixed. Feel free to report any issue you find with it.