metafizzy / metafizzy/flickity
Flickity animations take forever if your browser is configured to throttle frame rate (and hence requestAnimationFrame callbacks)
- Dominant language
- JavaScript
- Stars
- 7.6k
- Forks
- 593
- PR merge metrics
- No merged PRs in 30d
Description
**Test case:** https://codepen.io/dholbert/pen/XWwbrRK
(This is just the default testcase, which I forked & didn't modify at all)
Steps to Reproduce:
1. Use Firefox to view [that testcase](https://codepen.io/dholbert/pen/XWwbrRK). Click the left/right arrows, and notice how long the animation takes to complete.
2. Now, visit `about:config` and set preference `layout.frame_rate` to `2` (to limit the browser repaint cycle to 2-per-second).
3. Look at the testcase again and try clicking the arrows.
Actual Results:
The animation still plays every single frame of animation, but in extremely slow motion. So it takes ~20 seconds to complete the animation.
Expected Results:
Animation should still take the same amount of time (1 second or so), and each frame should simply make a huge amount of progress.
Notes:
* It seems that Flickity isn't tracking how much time passes between requestAnimationFrame calls, to ensure a consistent animation duration and animation speed.
* This particular configuration option (`layout.frame_rate`) is something that Firefox users do actually use for accessibility purposes, to reduce motion sickness from smooth animation. (See also https://github.com/metafizzy/flickity/issues/951 for a related-but-distinct flickity issue that's affecting this same group of users.)
* If you happen to test this on Linux with Wayland, note that you may also need to run Firefox with `MOZ_ENABLE_WAYLAND=0` environmental variable in order for the `layout.frame_rate` config option to have an effect.
Contributor guide
Research direction
Start with the linked CodePen testcase in Firefox, set about:config preference layout.frame_rate to 2, and reproduce the slow animation. Trace Flickity's requestAnimationFrame animation loop to see how elapsed time is handled; done means the animation still completes in about one second while making larger progress between callbacks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100