Three.js: CSS3DRenderer issue on Chrome, depending on camera position.

[novogrammer]

iframe is not displayed depending on camera position.

Even DOM elements are not displayed in the lower part.

It looks like Chrome's paint invalidation calculation is failed.

http://codepen.io/novogrammer/pen/LWMQxd
Setting GO_WRONG_WITH_CHROME to false will work fine.

Three.js version

• [x] Dev
• [x] r84

Browser

• [x] Chrome

OS

• [x] macOS

[Mugen87]

Maybe @yomotsu can help here.

[mrdoob]

I can reproduce in Chrome 57.0.2987.133.
Seems to be fixed in Chrome Canary though! (59.0.3063.0)

[Mugen87]

Seems to be fixed in Chrome Canary though! (59.0.3063.0)

I can confirm that! 😊

[yomotsu]

Reproduce even in Chrome for windows.

Seems chrome can not handle if elements are far...

IE mode (flat mode) could be quick workaround.

see
http://codepen.io/anon/pen/bqJQmV?editors=1010

@mrdoob Should CSS Renderer take "mode" option?

[yomotsu]

actually flat mode can solve other issues. such as sprites blinking on Firefox.

[novogrammer]

Thank you all!
It was fixed in Chrome Stable.
58.0.3029.81 (64-bit)