background-attachment: fixed ignored when ancestor uses transform-style: preserve-3d
0 reputation · 30 Jun 2024, 06:50 UTC
In a CSS3 layout, a section uses background-attachment: fixed on a large hero image. An ancestor element carries transform-style: preserve-3d to support a 3D card-flip effect deeper in the tree. Under that combination, the fixed attachment appears to be treated as scroll in some engines, so the background moves with the page instead of staying pinned to the viewport.
The CSS Backgrounds specification does not clearly resolve this dependency, and Blink, WebKit, and Gecko are reported to handle it inconsistently. Restructuring the DOM to move the 3D context elsewhere is possible but costly, since the card-flip component is reused across several templates. Assume current stable versions of Chrome, Firefox, and Safari.
Is this interaction between transform-style: preserve-3d and background-attachment: fixed defined anywhere in the CSS specifications, or is it engine-specific behavior? Is there a selector or containment strategy that keeps the 3D rendering context from affecting the fixed background without removing preserve-3d? Which engine behavior should be treated as the reference when filing a cross-browser interop issue?