Open jfrost-mo opened 11 months ago
Oh nice!
We have a reduced animation configuration available via the settings page, we'll see if we can hook it into this.
Note the animations on the page come from the component framework we use (vuetify) and are on-by default with no option to turn them off so we have to hack them away with CSS.
This could be hooked into https://github.com/cylc/cylc-ui/blob/ca2236a0a45e6c00ec2afab4fdecc8e025e84bc8/src/composables/localStorage.js#L32
using something like
window.matchMedia('(prefers-reduced-motion: reduce)')
for the default value instead of false
Edit: or using https://vueuse.org/core/usePreferredReducedMotion/ seeing as useLocalStorage
is also from vueuse
Problem
The cylc UI doesn't currently respect user agents setting prefers-reduced-motion. This accessibility option indicates whether animations should play, and is useful to both people who get nauseous at too much animation, and to people on systems that don't have the graphics to run the animations smoothly. (E.g. VDIs at the Met Office)
Proposed Solution
Fortunately you can just add a snippet of CSS to your pages to prevent animations. It reduces their duration to near-instant rather than removing them entirely, as some website rely on the events fired during an animation. I think this CSS just needs to be added to src/styles/index.scss.