Why does the WebGL drawing lag (ever so slightly) behind the CSS rendering?

[trusktr]

If you play close attention (more visible in Safari), then you'll notice that WebGL content lags slightly behind CSS content. For example, in this (example)[https://keithclark.co.uk/labs/3d-model-custom-element/examples/3d-scene/], move back a little, then jiggle the mouse around and the model seems to catch up to the motion of the floor a very short (but noticeable) moment later.

Curious to know why this happens.

[keithclark]

Think I've finally go to the bottom of this. It looks like a problem with that demo. Switching this...

3d-model-element/examples/3d-scene/demo.js

Line 25 in 556d9b6

requestAnimationFrame(update);

...to the following fixes the issue for me:

requestIdleCallback(update)