This issue is old, for example right at the end of this video, the flickering: https://www.youtube.com/watch?v=w9HeWBH_kvg

What stops people from fixing this?

Reproduces on Mac 10.12 but not linux. Driver problem?

Since this only seems to occur when the cubes intersect, it could possibly be related to the BSP-tree used for intersections and sorting in CSS3D. (That said, I can only repro on MacOS, which is strange.)

tobiasjs@, could you take a look?

I'm fairly certain it isn't a driver problem, because Three.js demos (and other WebGL demos) with intersecting content work perfectly. Is it valid to assume no driver problem if other WebGL content works just fine?

Take for example this Three.js example: 

https://threejs.org/examples/webgl_geometry_hierarchy.html

No glitchy things happen in that demo, for me. But also maybe none of those cubes' faces are parallel with each other, which might be a specific use-case to test.

I do have the following demo which is built on top of CSS 3D `transform`s (inspect the DOM), and you'll notice that while the car rotates, the wheels and will be glitchy, while the surfaces aren't parallel: 

https://jsfiddle.net/trusktr/ymonmo70/15/?utm_source=website&utm_medium=embed&utm_campaign=ymonmo70

Here's the same demo in full-screen mode, just pay attention to the rotating wheels, perhaps try zooming in: 

https://jsfiddle.net/trusktr/ymonmo70/15/embedded/result%2Cjs%2Chtml%2Ccss/

Here's the same one with only the wheels rotating, and you can see the glitch in the wheels clearly: 

https://jsfiddle.net/trusktr/ymonmo70/23/

Here's the same one with nothing rotating, everything static, with glitch frozen in time, (inspect the DOM to see the CSS transforms that are applied):

https://jsfiddle.net/trusktr/ymonmo70/24/

Here's the full screen version of that last one:

https://jsfiddle.net/trusktr/ymonmo70/24/embedded/result%2Cjs%2Chtml%2Ccss/

Here's one that shows the wheels rotated to 10 degrees, in which case the glitch is gone:

https://jsfiddle.net/trusktr/ymonmo70/25/

You can play with the number, try changing it from 10 to 9 in the JavaScript and you'll see it introduces the glitch. Here's the full screen version:

https://jsfiddle.net/trusktr/ymonmo70/25/embedded/result%2Cjs%2Chtml%2Ccss

Here's the static version of the last one (no JS, except for that which defines the custom elements):

https://jsfiddle.net/trusktr/ymonmo70/26/

and full screen:

https://jsfiddle.net/trusktr/ymonmo70/26/embedded/result%2Cjs%2Chtml%2Ccss

For reference, I've attached two images. One shows the front left wheel of the car with the glitch present, and the other shows the front left wheel rotated to where the glitch isn't present.

I believe this is a bug in the CSS3D renderer.

Deleted: glitch.png 341 KB

	glitch.png 341 KB View Download

Deleted: no-glitch.png 259 KB

	no-glitch.png 259 KB View Download

I just tried in ChromeOS, and there's no glitch there, so I guess that confirms no glitch in Linux.

To me it doesn't seem like a driver problem, even though it is happening on macOS but not Linux; Three.js WebGL-based content is working fine for me in both ChromeOS and macOS, no glitches, so maybe not drivers?

Or could it be possible that CSS 3D uses full OpenGL, not the same OpenGL ES as WebGL?

I can reproduce this on OSX but not on Linux for the same Chrome version. The difference between CSS 3D and WebGL is that the latter uses a z-buffer, whereas the former relies on a BSP tree for polygon sorting.  It does look like a BSP clipping issue, though, rather than a driver issue; the difference between OSX and Linux is not easy to explain.

Created a minimized static example here: https://rawgit.com/folded/94dd1e45b30ef61e9478aead6db8e5e3/raw/1b98926d493f471048316f8aa62b4f00e2fc57e3/test.html

Whether or not the result is incorrect depends on the window size.

A difference with Mac is CALayer use (see https://bugs.chromium.org/p/chromium/issues/detail?id=533690 ).  If I set --show-mac-overlay-borders, the cube borders are occasionally pink, and --disable-mac-overlays makes the bug go away, so I think this is the culprit.

This happens in safari, so likely a bug in CoreAnimation itself.

Chris, I'm assigning this to you for the a call regarding whether we want to close this as a MacOS bug, or try to find some other solution.

Yes, this is likely a CoreAnimation bug. I'll try to transform the page into a stand-alone application showing the CoreAnimation bug -- if I can do that, I'll file a Radar.

 Issue 844998  has been merged into this issue.

Thanks for the merge, just checked the video linked by the comment a year and a half ago by trusktr. For future reference, the flashing is visible from this time of the 2013 (!!!) video: https://youtu.be/w9HeWBH_kvg?t=1756 - symptom looks the same, can't be sure if the root cause is identical. Any prognosis on this?

This example also seems to be Chrome/Safari specific, can't be sure if the underlying issue is the same: https://github.com/elastic/kibana/issues/23602 FireFox is good. The interesting part about it is that the example is not a real 3D scene, it's a standard 2D application (though `matrix3d` is used).