1914651 - loading.svg animations are not restored in some situations when re-enabling animations at the operating-system level

Status: NEW

(Core :: Graphics: ImageLib, defect)

Description

[Erik Nordin [:nordzilla]]

Description

Bug 1908920 ensures that our loading.svg respects the user's prefers-reduced-motion settings.

I noticed while manually testing the feature, on my Ubuntu computer, that enabling prefers-reduced-motion during an active Firefox session correctly changes the icon to the reduced-motion icon. However, when disabling prefers-reduced-motion during an active Firefox session, the icon is not switched back to the animated icon until browser restart.

---

Steps to reproduce

This behavior can be seen by utilizing the SelectTranslationsPanel.

• Open your operating system settings, and ensure that animations are enabled. On Ubuntu, this can be done in Accessibility settings by toggling "Enable Animations" to be on.
• Open the browser to a translatable page, e.g. https://es.wikipedia.org/wiki/Mozilla_Firefox
• Highlight a selection of text to translate.
• Open the right-click context menu and choose the "Translate Selection to <language>" option.
• Observe that the icon presented during the "Translating..." placeholder is the animated SVG icon.
• Without closing Firefox, open your operating system settings, and ensure that animations are now disabled. On Ubuntu, this can be done in Accessibility settings by toggling "Enable Animations" to be off.
• Return to Firefox and translate another selection of text.
• Observe that the icon presented during the "Translating..." placeholder is now the non-animated SVG icon.
• Without closing Firefox, open your operating system settings, and ensure that animations are now re-enabled. On Ubuntu, this can be done in Accessibility settings by toggling "Enable Animations" to be on.
• Return to Firefox and translate another selection of text.

Expected Behavior
The SVG icon presented during the "Translating..." placeholder is the animated SVG icon.

Actual Behavior
The SVG icon presented during the "Translating..." placeholder is the non-animated SVG icon, even though animations have been re-enabled.

Comment 1

[Erik Nordin [:nordzilla]]

Investigation Update

This may have something to do with loading.svg being used as a background-image vs. a list-style-image.

The SelectTranslationsPanel (from the STR above) uses this as a background-image.

However, I found that triggering a full-page translation, which uses this SVG as a list-style-image, does something to reintroduce the animations in that context, and this also fixes the animations in the SelectTranslationsPanel as well without having to restart the browser.

Comment 2

[Sam Foster [:sfoster] (he/him)]

This sounds about right. As a background-image, the SVG document is cached and never restarted. As a list-style-image, it is content and I guess gets reset when the rule matches again?

Comment 3

[Timothy Nikkel (:tnikkel)]

Images not updating after user changes their OS settings feels like a corner case. Feel free to chime in if I've missed something.