No animations on Chromium 73 or older

[lkinasiewicz]

Description

All animations behave as if the duration was set to 0 on Chrome/Chromium 73 or older.

I know no one uses Chrome 73 today, but Chromium 69 is used to run apps on Samsung TVs with Tizen 5.5 (TV model year 2020) and Chromium 68 is used on LG TVs with WebOS 5 (TV model year 2020).

Steps to reproduce

1. Create a simple app that uses withTiming to animate e.g. a position of a View.
2. Run the app on Chromium 73. (Old versions can be downloaded at https://vikyd.github.io/download-chromium-history-version/#/).
3. Observe the animation. There is none. The animated value changes immediately from previous value to target value.
4. In the logs you can see:

[Reanimated] Reduced motion setting is enabled on this device. This warning is visible only in the development mode. Some animations will be disabled by default. You can override the behavior for individual animations, see https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#reduced-motion-setting-is-enabled-on-this-device.

On Chromium 74 animations work properly.

Snack or a link to a repository

https://snack.expo.dev/@lkinasiewicz/7dcc01

Reanimated version

3.14.0

React Native version

0.72.6

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[szydlovsky]

@lkinasiewicz Thanks for posting the issue! We are not so sure about your PR since it has a potential to introduce a lot of regression. However, there is a pretty neat fix you could use: in the latest nightly version, new component called ReducedMotionConfig has been added. It overrides Reduced Motion setting of the app as long as it is rendered. You can see the docs in here before they are merged. It will probably be present in the next stable version, so a newer 3.14.x or 3.15.x.

[DrRefactor]

@szydlovsky I wonder if there's even a possibility for the regression. Affected media query is supported since Chromium 74.

EDIT:
Similar case on other browsers:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#browser_compatibility

Moreover, if browser has no "reduced motion" feature, then assuming it's "on" is wrong, it forces a11y feature without a user's consent.

[lkinasiewicz]

I would rather say that from the beginning, the feature of recognizing reduced motion in reanimated introduced a regression on all browsers not supporting this feature. Sorry, but I don't understand how fixing that might be seen as a regression.

Regarding the new ReducedMotionConfig - if I understand correctly, to work around the problem in this ticket, I would have to write some hacky code with detecting on my own if prefers-reduced-motion media query is supported by the browser and if not, then override the default settings of reanimated.

By the way, why is reanimated not using react native API? https://reactnative.dev/docs/accessibilityinfo#isreducemotionenabled
This is also implemented in react-native-web in the correct way. Can we use it instead of doing the same thing in another way?

[szydlovsky]

@lkinasiewicz alright we will have the PR carefully looked into and discuss the topic in the team. Thanks for pointing it out!