Available in Chrome 53+ | View on GitHub | Browse Samples
"Flattening" is the process of drawing 3D-positioned children into the
parent's rendering plane. HTML elements flatten by default, but can prevent
this by applying the
transform-style: preserve-3d CSS rule.
This only has an effect if children are actually positioned in 3D.
Flattening is required/strongly desired, however, if elements have style which require filter-like rendering or clipping. Flattening is already forced for a number of the situations mentioned in the specification draft as "grouping properties".
This particular change is motivated by the simplifications it yields for how 3D-positioned elements with opacity are composited. Currently, opacity is the only post-processing effect which does not force flattening. Without this change, the browser is forced to apply opacity individually to elements positioned in 3D space rather than everything as a group.
The images below are screenshots illustrating the difference in the expected rendering before and after the change introduced in Chrome 53. You can compare it to the Live Output section, which shows what your current browser actually renders.
Before Chrome 53
After Chrome 53
The relative layering and blending of each of the colored boxes below will vary depending on whether the browser supports the old or new behavior.