1720977 - Honour prefers-reduced-motion on homepage

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, defect, P1)

Description

[MarjaE]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:88.0) Gecko/20100101 Firefox/88.0

Steps to reproduce:

visit https://pontoon.mozilla.org/

Click "Start Localizing Now," sudden automatic smooth scrolling, migraine.

Actual results:

Tried to report under Product > Mozilla Localizations but can't report there because it's not a bug in any specific localization.

Expected results:

There should be a place to report bugs with pontoon/localization.

Comment 1

[Matjaz Horvat [:mathjazz]]

Could you please clarify what the bug is about?

Comment 2

[MarjaE]

It's that it's unclear where on Bugzilla to report bugs with the pontoon/localization site.

Comment 3

[MarjaE]

The bug with Bugzilla was that it's unclear where to report bugs with the pontoon/localization site.

The bug with Pontoon was that if I click "Start Localizing Now," I get hit with sudden automatic animated scrolling. i.e. smooth scrolling., giving me a terrible migraine. prefers-reduced-motion doesn't protect against this.

Comment 4

[Matjaz Horvat [:mathjazz]]

We track bugs in Bugzilla, which in our experience most of our users can't use. Until we replace it with something more appealing to the general population (we're considering migrating to GitHub issues, see bug 1688846), there's a "Give Feedback" link in the menu, which takes you to Discourse.

Sorry to hear about the issues you have when clicking on the "Start Localizing Now" link. It should take you to the team page of the locale your browser is set to, e.g. https://pontoon.mozilla.org/de/. Is the loading animation on that page problematic? There should be no animation on the homepage (where the button it).

Comment 5

[MarjaE]

Thank you. "Start Localizing" leads to a list, but none of the languages I use. "Learn More" still leads to animated scrolling.

Comment 6

[Matjaz Horvat [:mathjazz]]

OK, thanks for clarifying!

To sum up: the bug is about the smooth animation on the homepage which is triggered by moving between sections of the page, either by clicking on the "Learn More" link, scrolling or using the Up/Down key.

Animation could be problematic for some users, e.g. ones with vestibular motion disorders.

We should honor prefers-reduced-motion and reduce the animation or prevent it completely:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Comment 7

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1975

Comment 8

[Matjaz Horvat [:mathjazz]]

MarjaE: There are other places in Pontoon where we use smooth scrolling behavior. I wonder if we should prevent it everywhere when prefers-reduced-motion is used? Or maybe homepage is specific due to the static background which results in a parallax-like scrolling?

Here's an example in the translate page - if you click the Next button several times, the string list on the left will scroll smoothly to make the selected string always visible. I apologize if this is causing inconvenience for you, but I don't know how else to verify it.
https://mozilla-pontoon-staging.herokuapp.com/sl/amo/all-resources/

Comment 9

[MarjaE]

I consistently get sick from smooth scrolling or parallax scrolling. Not just the combination.

Comment 10

[Matjaz Horvat [:mathjazz]]

Thanks for the update and sorry to hear.

I'll amend the patch to disable smooth scrolling across the app.