search

GoogleChrome / samples

A repo containing samples tied to new functionality in each release of Google Chrome.
https://www.chromestatus.com/samples
Apache License 2.0
5.77k stars 2.38k forks source link

Opacity flattening example does not show how transforms are flattened. #738

Open trusktr opened 3 years ago

trusktr commented 3 years ago

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 commented 3 years ago

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).