What I think is a clipping issue

[Van-3]

I have a project using react, three and rtf.
In my scene if I pull the camera back the background of the containing div will show.

If I set the div containing my canvas to a width of 99% with inline styling. Then on completion of loading the models set it to 100%. This issue goes away.

Can anyone point me to what may be going on?

[drcmda]

clipping can have a dozen reasons. your camera, near far, which is always related to how big your models are. when it clips it will show the transparent background unless alpha is false. you can also mess up the internal resize observer by shifting the canvas around, transitioning its size etc. the dom has a hard time figuring out changes.

[Van-3]

"you can also mess up the internal resize observer by shifting the canvas around, transitioning its size etc. the dom has a hard time figuring out changes."

That is the part that confuses me. Changing the size seems to fix the issue. It is functional at this point but the fix is very klugey and I am uncomfortable not understanding the root cause.

[drcmda]

Resize observing is a Dom construct, it tells us how big the canvas is. But the dom is broken and the observer isn't stable in a situation where the canvas is transformed by css, when you shift it around, transition it, scale it. If it just sits in a stable place there should be no problems.