Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

No animations on Chromium 73 or older #6269

Closed
lkinasiewicz opened this issue Jul 15, 2024 · 4 comments · Fixed by #6271
Closed

No animations on Chromium 73 or older #6269

lkinasiewicz opened this issue Jul 15, 2024 · 4 comments · Fixed by #6271
Labels
Platform: Web This issue is specific to web Repro provided A reproduction with a snippet of code, snack or repo is provided

Comments

@lkinasiewicz
Copy link
Contributor

lkinasiewicz commented Jul 15, 2024 •
edited

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
@github-actions github-actions bot added Platform: Web This issue is specific to web Repro provided A reproduction with a snippet of code, snack or repo is provided labels Jul 15, 2024
lkinasiewicz added a commit to lkinasiewicz/react-native-reanimated that referenced this issue Jul 15, 2024
@lkinasiewicz
[Web] Fix animations on Chromium 73 and older (software-mansion#6269)
add7fad
@lkinasiewicz lkinasiewicz mentioned this issue Jul 15, 2024
Merged
@szydlovsky
Copy link
Contributor

szydlovsky commented Jul 16, 2024 •
edited

@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
Copy link
Contributor

DrRefactor commented Jul 16, 2024 •
edited

@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
Copy link
Contributor Author

lkinasiewicz commented Jul 16, 2024 •
edited

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
Copy link
Contributor

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

github-merge-queue bot pushed a commit that referenced this issue Jul 17, 2024
@lkinasiewicz
[Web] Fix animations on Chromium 73 and older (#6269) (#6271)
054ee4e 
## Summary

Fixes #6269 

`prefers-reduced-motion` was introduced in Chromium 74:
https://chromestatus.com/feature/5597964353404928

The code on `main` branch seems not to care about the case when there is
no definition of `prefers-reduced-motion`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Platform: Web This issue is specific to web Repro provided A reproduction with a snippet of code, snack or repo is provided
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Web] Fix animations on Chromium 73 and older (#6269) lkinasiewicz/react-native-reanimated
3 participants
@DrRefactor @lkinasiewicz @szydlovsky