FIX: Improvements to animated image pausing (PR #12839)

  • Adds pause/play icons in bottom/right corner
  • Pauses animated images automatically on blur
  • Resumes animated images when window focus returns
  • Pauses on load when OS has prefers-reduced-motion enabled

The icons are shown as follows:

Pause icon is shown for non-touch devices when users hovers over the animated image. Play icon is shown on all devices when animation is paused.

GitHub

This pull request has been mentioned on Discourse Meta. There might be relevant details there:

Just a minor note, know that you can add/remove multiple classes at once:

div.classList.remove("foo", "bar", "baz");

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

we could probably remove these listeners in the teardown() hook of initializer for extra safety.

Am I missing something here? Indentation seems weird for what seems like a top level selector.

I suspect it’s because the selector is quite long (this was Prettier’s doing anyway).

The title of this pull request changed from “FEATURE: Improvements to animated image pausing” to "FIX: Improvements to animated image pausing