I encountered an issue where the root element (svg or canvas) in the react-zdog library grows infinitely due to the resize observer. The problem occurs when the root element is wrapped in a
element that is subscribed to the resize observer. Whenever the size of the
changes, it applies the size changes to the root element (svg or canvas). However, if the root element has margin, padding, or border, its total size becomes larger than the
, triggering the resize observer again. This creates an infinite loop, causing the root element to keep growing in size.
Steps to Reproduce:
It starts on initial render itself.
One weird thing I noticed that this happens react 18.0.2 version, while works perfectly fine with version 17.
Proposed Solution:
The solution to then issue is that adding css property box-sizing as "border-box".
By setting the box-sizing property to border-box, the size calculations will include the element's padding and border, preventing it from growing larger than its parent
I encountered an issue where the root element (svg or canvas) in the react-zdog library grows infinitely due to the resize observer. The problem occurs when the root element is wrapped in a
Steps to Reproduce:
One weird thing I noticed that this happens react 18.0.2 version, while works perfectly fine with version 17.
Proposed Solution: The solution to then issue is that adding css property box-sizing as "border-box". By setting the box-sizing property to border-box, the size calculations will include the element's padding and border, preventing it from growing larger than its parent