THREE.js WebGlRenderer domElement getBoundingClientRect returns 0s in iframe

I have the following code:

...
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(WIDTH, HEIGHT);
...
    controls = new TrackballControls(camera, renderer.domElement);

When running the above code in an iframe, PAN events don’t fire. Investigation reveals that:

    console.log('???', renderer.domElement.getBoundingClientRect())

returns DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}

This results in all mouse move events being mapped to infinity, because there is no ‘height’ or ‘width’ until a resize event is called.

In general, it seems that dynamically adding a canvas to the DOM could result in weird timing errors when passing that element to plugins like TrackballControls.

What is the right way to ensure that we only use the canvas once it has actually loaded?