Fixed rAF throttling issue caused by new Chrome flag #39
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
pushed a commit
to bvaughn/react
that referenced
this pull request
Aug 13, 2021
By upgrading react-virtualized-auto-sizer to 1.0.6 See bvaughn/react-virtualized-auto-sizer#39
bvaughn
pushed a commit
to facebook/react
that referenced
this pull request
Aug 13, 2021
By upgrading react-virtualized-auto-sizer to 1.0.6 See bvaughn/react-virtualized-auto-sizer#39
jstejada
reviewed
Aug 13, 2021
jstejada
left a comment
jstejada
left a comment
There was a problem hiding this comment.
was just curious about the fix! awesome!
| } else { | ||
| windowObject = global; | ||
| } | ||
|
|
There was a problem hiding this comment.
not sure if using Flow/TS, but is there any scenario where the window object would still be null here?
Owner
Author
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
also assuming there’s no possibility that one of the raf/cancel functions are not null without the other also not being null, right?
Owner
Author
There was a problem hiding this comment.
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
…22083) By upgrading react-virtualized-auto-sizer to 1.0.6 See bvaughn/react-virtualized-auto-sizer#39
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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