Issue with CSS3DRenderer

I’ve created a scene with sphere geometry and some CSS3D elements. One of the CSS3D elements loads an iframe from an API.

On my Macbook Pro using Chrome, the scene appears perfectly fine. But when I try to run the page on other machines, I get a strange problem: the CSS3D elements seem to move faster than the background geometry when the user navigates through the space. So the geometry appears to “stutter” behind the CSS3D elements, and it’s a little disorienting. On Microsoft Edge, some of the CSS3D elements disappear and reappear as you mouse through the space. I’m using simple OrbitControls.

Any idea what could be causing this?

I’m not seeing any errors in the console. so I’m assuming it’s a rendering issue. I tried fiddling with the renderer settings, but I haven’t found a solution because I’m not really sure what the issue is. Is this expected behavior from the CSS3D renderer?

What happens if you make some tests with the official CSS3D examples on your machines (https://threejs.org/examples/?q=css3d)? Especially this one (https://threejs.org/examples/css3d_sandbox.html). It combines WebGLRenderer and CSS3DRenderer. Do you see the same mentioned variations?

@philjms Hello, do you have a code sample?

Here’s one of mine mixing CSS3D with WebGL: jsfiddle.net/trusktr/jc6j1wmf. If you’re lucky (press “Run” a few times if needed) you’ll see the Sphere intersects with the DOM elements when moving it around.