Canvas resize delayed after container resize.

[FarazzShaikh]

trafficstars

https://user-images.githubusercontent.com/55190601/160119392-0b2ed18a-70d6-4cbd-8f60-c7da64aaa3e4.mp4

The resizing of the canvas is delayed from that of its container. Here the container goes from "100%" to "50%" width when toggled.

CSB: https://codesandbox.io/s/nervous-voice-p7it8l

Toggle the switch in the GUI and observe the log. The time to change canvas size will be logged in frames.

Tested:

• 7 frame delay 120fps
• 4 frame delay 60fps
• 2 frame delay 30fps

Platform: Windows 10 Home 21H2. AMD Ryzen 9 5900HS 3.30 GHz. NVIDIA GeForce RTX3060 (Laptop).

[FarazzShaikh]

Workaround - Disable debounce on resize: (Thanks Cody!)

<Canvas 
    resize={{ debounce: 0 }}
/>

Still causes issues with css transitions. See: https://codesandbox.io/s/intelligent-thunder-i98r3c?file=/src/styles.css

[CodyJasonBennett]

If you must have a canvas that plays well with CSS transform/rapid DOM resizing, you can try creating a canvas with render and measuring its parent container, but prefer to set gl viewport instead.

• https://codesandbox.io/s/laughing-merkle-hnb0mm?file=/src/Canvas.js

[dahuigeniu]

goodproject