ReactiveX / ReactiveX/rxjs

animationFrameScheduler incorrect behavior

Open
#6,854 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
31.7k
Forks
3k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

AnimationFrameScheduler doesn't execute scheduled tasks under certain circumstances.

If AnimationFrameScheduler gets a new id (e.g. new task is scheduled) before the flush method empties current actions array in the do-while loop we encounter wrong behavior.
In this case we enter the recycleAsyncId method of AnimationFrameAction .
Then recycleAsyncId sets _scheduled field to undefined.
After that we add new actions to the actions array in requestAsyncId, start requestAnimationFrame and enter flush method again on browser repaint.
But this time actions array in the flush method has two types of action with different id's.
What is the most important is that the first element of the actions array has id which is different from the current frame id.
This leads us to false condition "action.id === flushId" (in do-while loop) because action.id is the id of the previous frame but flushId is the id of the current frame.
Since that moment we are unable to execute any action in the actions array and empty it.

Problem occured after commit e35f589e2ca10ab2d2d69f7e9fe60727edc4c53d
in src/internal/scheduler/AnimationFrameAction.ts lines 30-33

Expected behavior

Expected console log output:
default task
task1
task2
default task
task1
task2

Reproduction code
let reschedule = true;
function log() {
  console.log('default task');
  animationFrameScheduler.schedule(() => console.log('task1'));
  animationFrameScheduler.schedule(() => console.log('task2'));
  if (reschedule) {
    this.schedule();
    reschedule = false;
  }
}

animationFrameScheduler.schedule(log);
Reproduction URL

https://stackblitz.com/edit/1gjlhu?devtoolsheight=50&file=index.ts

Version

7.5.1

Environment

No response

Additional context

animationFrameScheduler from rxjs version 7.1.0 worked correctly in this case

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/internal/scheduler/AnimationFrameAction.ts, especially lines 30-33, and reproduce the issue using the linked StackBlitz example. Trace the interaction between the actions array, recycleAsyncId, requestAsyncId, and flush; done means the reproduction produces the two expected sets of default task, task1, and task2 output.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.