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.

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

Fixed rAF throttling issue caused by new Chrome flag #39

Merged
merged 2 commits into from
Aug 13, 2021
Merged

Conversation

bvaughn
Copy link
Owner

@bvaughn bvaughn commented Aug 13, 2021

Chrome's new "Throttle non-visible cross-origin iframes" flag causes problems for code running inside of hidden iframes. In this case, animation frames get scheduled without any error but never get called. This causes problems for the React DevTools browser extension specifically.

This commit adds a workaround by scheduling a backup timeout along with animation frames. In the normal case, these timeout will be cancelled by the animation frame (which will run first).

For more info, see facebook/react#21986

Brian Vaughn added 2 commits August 12, 2021 17:12
Chrome's new "Throttle non-visible cross-origin iframes" flag causes problems for code running inside of hidden iframes. In this case, animation frames get scheduled without any error but never get called. This causes problems for the React DevTools browser extension specifically.

This commit adds a workaround by scheduling a backup timeout along with animation frames. In the normal case, these timeout will be cancelled by the animation frame (which will run first).

For more info, see facebook/react#21986
@bvaughn bvaughn merged commit be43161 into master Aug 13, 2021
@bvaughn bvaughn deleted the chrome-raf-fix branch August 13, 2021 00:19
bvaughn pushed a commit to bvaughn/react that referenced this pull request Aug 13, 2021
bvaughn pushed a commit to facebook/react that referenced this pull request Aug 13, 2021
Copy link

@jstejada jstejada left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was just curious about the fix! awesome!

} else {
windowObject = global;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure if using Flow/TS, but is there any scenario where the window object would still be null here?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. The else here falls back to global when window and self are undefined. One of the three should always be present.

return setTimeoutFn(callback, TIMEOUT_DURATION);
};
} else {
// Counter intuitively, environments that support animation frames can be trickier.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also assuming there’s no possibility that one of the raf/cancel functions are not null without the other also not being null, right?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If either request or cancel function is null, we'll hit the above timeout based code path.

zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants