metafizzy / metafizzy/flickity

Flickity animations take forever if your browser is configured to throttle frame rate (and hence requestAnimationFrame callbacks)

Open
#1,305 5 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.