fix: smooth canvas resizing during CSS transitions (#3604)fix: smooth canvas resizing during CSS transitions (#3604)

[Mishra-coder]

Description

Fixes #3604 - Canvas element expands smoothly during CSS transitions, but 3D rendering now resizes smoothly instead of snapping to the final size.

Root Cause

The useMeasure hook uses ResizeObserver, which typically only fires at the beginning and end of CSS transitions, not during intermediate frames. This caused the 3D rendering to update only after transitions completed.

Solution

Added continuous size polling using requestAnimationFrame to detect size changes on every frame during CSS transitions:

• Checks container size on each animation frame when canvas is active
• Only updates when size changes by >0.5 pixels to avoid unnecessary renders
• Fully backward compatible with existing resize behavior
• No breaking changes

Changes

• Added RootStore import and ref to track the store
• Created containerElementRef to access container DOM element
• Added useEffect with requestAnimationFrame loop for continuous size checking
• Updated container div ref to populate both useMeasure callback and our ref

Testing

✅ All existing canvas tests pass without regressions:

• 5 tests, all passing
• No new test failures

Notes

Manual testing is required to verify smooth transitions with actual CSS animations, as this is a visual/timing issue that cannot be reliably tested in automated unit tests.- Add continuous size polling using requestAnimationFrame

• Fixes issue where 3D rendering snaps instead of smoothly resizing
• ResizeObserver only fires at start/end of transitions, not during
• Add 0.5px threshold to prevent unnecessary updates
• Fully backward compatible with existing resize behavior

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e3db847:

Sandbox	Source
example	Configuration

[Mishra-coder]

@CodyJasonBennett PR is ready for merge please review and suggest changes if required.

[krispya]

I assume this is vibecoded but more to the point, the resizing is debounced on purpose and this PR misunderstands that intent.

You can pass in your own config to react-use-measure via the resize prop: https://r3f.docs.pmnd.rs/api/canvas

You can then try making the debounce 0: https://github.com/pmndrs/react-use-measure?tab=readme-ov-file#api

Or pass in undefined to disable the resizing and do it manually.

If you think we should move off react-use-measure let’s discuss it as an RFC. The resizing strategy for R3F needs to be rethought but given it is an enterprise library we cannot make breaking changes lightly.