[css-transforms-2] transform-style initial value

[ewilligers]

There is a discrepancy between spec and implementations.

https://drafts.csswg.org/css-transforms-2/#transform-style-property

Value: auto | flat | preserve-3d
Initial: auto

A value of "flat" for transform-style establishes a stacking context, and establishes a 3D rendering context.

Chrome, Edge, Firefox and Safari support flat and preserve-3d, but not auto; they have initial value flat. I suspect they do not establish a stacking context and 3D rendering context whenever transform-style is flat.

[tabatkins]

Sigh, this property has never been described in a sensical way. It used to be just "flat" and "preserve-3d", with an initial value of "flat". The implication was that all elements flatten by default, and you need to set preserve-3d on all elements that want to interact in the 3d rendering context.

But Safari didn't do that, they had some additional special rules that caused descendants to stay in the 3d rendering context unless you said "flat". There was no indication of how that was achieved, but the only way we could figure out how to explain it was with a third "auto" value, which the spec now reflects.

I've been forever confused about this whole topic, and would welcome light shed on it from someone who understands the implementations.