Opacity flattening example does not show how transforms are flattened.

[trusktr]

Referring to this:

https://github.com/GoogleChrome/samples/blob/5f07c2257876303575524e479b20fd48ddf877a1/css-opacity-force-flattening/index.html#L67-L75

That page should perhaps also show the undesirable and unfortunate effect that opacity flattening has on 3D transforms.

[trusktr]

Here is a similar demo based on the one on that page:

https://codepen.io/trusktr/pen/vYZXMVJ?editors=1100

It shows that the 3D aspect of the scene is unintuitively destroyed if opacity is applied. The group without opacity shows the proper and expected intersections.

Some people say that this is correct behavior (the flattening) because the spec says so and browsers follow it.

Other people believe the spec is wrong and browsers are wrong for following it. (I'm included here, because CSS 3D has consistently been a let down).