Feature request: better support for animation accessibility

Firefox Development
#1

I think Firefox needs more attention to animation accessibility. I know that many people think that animation is “delightful,” but it can be a terrible amount of stress for people with visual motion sensitivity. (The problem can be related to vestibular disorders, epilepsy, autism, or other conditions.)

I always set toolkit.cosmeticAnimations.enabled to false with about:config, but it’s no longer enough. It removes the blue animation flash on the tabs, but leaves a lot of other cosmetic animations untouched.

I think that setting toolkit.cosmeticAnimations.enabled to false should actually disable all of them.

I’ve tried using the Stylus extension to remove all animations, but this breaks some pages, and I have minimal browser extensions in some of my Firefox profiles, because I need to see what sites look like without extensions during development.

Example: almost every time I load a web page, there is a horrible flashing from the zoom percentage in the address bar. I have the font size on most pages zoomed, and each page load causes a very distracting flash on the screen.

I’m using Firefox 70.0b9 on Ubuntu 16.04. The problem exists in several Firefox profiles including one that doesn’t have any browser extensions, so it doesn’t appear to be caused by an extension.

My feature request is to consider the toolkit.cosmeticAnimations.enabled setting and tie all the browser animations to that setting so that they can be turned off easily.

Here is some reading on animation accessibility:

(I had to de-link some of the URLs, because new users can’t post more than 5 links in a post.)

Some of those links suggest that elements shouldn’t be flashed more than three times per second, but I think it’s also helpful to make it possible for UIs to not flash at all.

Here’s what I have in my about:config at the moment. Let me know if I might have missed something obvious that might fix the problem.

image
image.png1127×840 64.5 KB

#2

After a lot of searching, I discovered userChrome.css, but it doesn’t seem to work correctly, even if I set toolkit.legacyUserProfileCustomizations.stylesheets to true. (Sample rules are at the bottom.)

The word “legacy” in the setting makes it sound like the feature is going to disappear.

It shouldn’t be this difficult — that one setting should turn all the cosmetic animation off, including the zoom icon and in the dev tools.

#urlbar-zoom-button {
    display: none !important;
    animation-name: urlbar-zoom-reset-pulse;
    animation-duration: 0 !important;
}
#urlbar-zoom-button[animate="true"] {
    animation-duration: 0 !important;
    animation-name: urlbar-zoom-reset-pulse;
    display: none !important;
}
#3

The first line of your first rule completely hides the button in Firefox 69 because nothing after the display: none is ever needed:

#urlbar-zoom-button {
    display: none !important;
    animation-name: urlbar-zoom-reset-pulse;
    animation-duration: 0 !important;
}

If you still see the button, there might be an issue with file or folder naming or location. You can compare with the steps on my site here:

https://www.userchrome.org/how-create-userchrome-css.html

To remove only the bulging effect, you just need to override the animation name:

/* Remove animation on URL bar zoom reset button */
#urlbar-zoom-button {
  animation-name: none !important;
}
1 Like
#4

That made me wonder whether this could work as a global animation override for the toolbar area:

/* Override animations in the toolbar area */
#navigator-toolbox * {
  animation-name: none !important;
}

I’m not sure what is animated these days, so I’m not sure how best to test that.

1 Like
#5

Thanks, I didn’t have the userChrome.css file in a chrome directory, but the snippet below seems to work on the one profile I’ve tested it on.

#urlbar-zoom-button {
    animation-name: none !important;
}

It would be ideal if toolkit.cosmeticAnimations.enabled could disable all of the cosmetic animations by default. Superfluous animation is creeping into many areas of the browser, like dev tools and even the rendering of pages that don’t have any animations on them.

Animation is not “delightful” to some people. It interferes with our ability to browse the Web comfortably.