CSSRenderer text jitters on zooming

Questions
, ,
1

Hello, I’m working on a gallery grid with a bunch of images with labels. I’m currently just using placeholder elements and have the motion working how I’d like. One issue I’m having is when I animate the camera zoom the text jitters up and down as the size of the text changes. It is evident in the video below.

I create the HTML elements with a CSS3DObject in a loop as such:

// create the element
const element = document.createElement( 'div' );

const image = document.createElement( 'img' );
image.src = `https://loremflickr.com/600/830/art?random=${i}`
element.appendChild(image)

const name = document.createElement("h3");
name.innerHTML = `John O'Neil Stewart ${i/2}`;
element.appendChild(name);

// set position
const objectCSS = new CSS3DObject( element );
// ... set the position for the element ... //
// ... add click listener ... //
scene.add( objectCSS );

To animate the camera I am using camera-controls package

cameraControls.zoomTo(newzoom, true);
cameraControls.moveTo(goalPos.x, goalPos.y, goalPos.z, true);

I’d appreciate any help in fixing the text jitter. I’m not sure if there is a renderer change I need to make or if that is just a side effect of using HTML elements in the scene graph.

Thanks!