UserAgent: Mozilla/5.0 (X11; CrOS x86_64 10032.75.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.116 Safari/537.36
Platform: 10032.75.0 (Official Build) stable-channel caroline

Example URL:
https://codepen.io/anon/pen/XVVXXj

Steps to reproduce the problem:
1. Open the URL
2. Observe heavy flickering.
3. Try resizing the code editor to observe flickering outside of the example.

What is the expected behavior?
There should be no flickering. The drawing should be smooth.

What went wrong?
The drawing flickers not only inside of the iFrame, but it causes the entire Codepen site to flicker. This bug leaks outside of the iframe that contains the drawing and affects rendering of the whole page.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 63.0.3239.116  Channel: n/a
OS Version: 10032.75.0
Flash Version: 

Sorry that I can't provide a smaller reproduction. It only happened when I was making precisely this.

It is rendered entirely with CSS 3D transforms, no WebGL, just plain DOM.

To debug this more easily, you can disable line 13 in the JS editor section. This will disable the rotation, so that the image will be a static DOM and you can inspect it.

While rotation is disabled, you can try resizing the example area which will trigger the glitches.

Notice that when you resize the example, and since rotation is disabled to refresh the browser's paint, you can stop resizing and leave the whole codepen page in it's glitched state.

The DOM elements are circles (made with border-radius). The i-scene and i-node elements are for all intents and purposes essentially styled to behave like DIV elements, and they have transform-style:preserve-3d.

Inside i-scene elements is a shadow root that has a DIV element that has overflow:hidden. This is what makes an i-scene element contain it's "scene" (clip it's content).

I am able to reproduce the glitches on both Chrome OS and macOS. There seems to be a higher chance of triggering glitches when the window is maximized.

Here's another pen with the rotation offset of 30 removed (line 13 in the HTML) which shows that the glitching goes away:

https://codepen.io/anon/pen/OzzMxG

The rotation="0 30 0" eventually gets applied to the DOM element as CSS transform:rotateY(30deg) but via transform:matrix3d().

Both i-scene elements have overflow:hidden to contain their scenes. So what's happening when the rotation is enabled is that the outer scene element is supposed to be effectively rotating the inner scene as an image, so the content in the inside of the inner i-scene is effectively like a texture (or so I'd hope, but it's CSS3D, so we are not supposed to know what it's doing :) ).

If I remove the inner scene, I can effectively disable the inner scene from being a "texture", and the problem goes away!!! For example, here's the original scene but with the inner scene removed:

https://codepen.io/anon/pen/KZZVoV

Now there is only a single i-scene with overflow:hidden. I have a feeling the bug has to do with this. Although this version works, the framerate drops considerably on mobile because world transforms are being re-calculated for every element, whereas the version with the nested i-scene results in only a single world transform being re-calculated for the inner "texture". At least, this is what I'm guessing, and it seems like it'd make sense, but I haven't look at Chrome's source regarding this.