Three.js: CSS3DRenderer projection matrix bug in Chrome for Windows

[jocabola]

Since latest two updates of Chrome, CSS 3D rendering has several clipping and rendering issues

We realized that a project were we have a CSS 3D renderer synchronized with a WebGL one started rendering wrongly in Chrome since latest browser updates. We can't share link at this point but the issue also happens with this page.

To Reproduce

This is happening to me on Windows currently in Version 85.0.4183.121 (Official Build) (64-bit) but with the one before that as well.It didn't happen back in August with an earlier version.

Steps to reproduce the behavior:

1. Go to http://jeromeetienne.github.io/videobrowser4learningthreejs/
2. You should see an iFrame matching the TV screen in the 3D WebGL scene
3. Instead you will see the pink background. Try resizing window sometimes you might see parts of the iFrame.

If you use the inspector, you'll see that the iFrame is correctly placed but it is not rendering as if it would be clipped (you see the background instead). Changing the overflow of the renderer's dom element to visible doesn't fix the issue.

Live example

• http://jeromeetienne.github.io/videobrowser4learningthreejs/

Expected behavior

Wrong Behaviour

Platform:

• Device: Desktop
• OS: Windows
  
  
  
  • Browser: Chrome Version 85.0.4183.121
  
  
• Three.js version: That example showed here runs on top of a very old version of threeJS but is happening to us with latest r120. We believe it could be a browser bug.

[Mugen87]

There is already a Chromium issue for this:

https://bugs.chromium.org/p/chromium/issues/detail?id=1136046

[Mugen87]

@jocabola Consider to star the issue at bugs.chromium.org to raise its priority.

[jocabola]

Done @Mugen87 Thank you!

[Mugen87]

The issue is fixed now and will be available with Chrome 87.