1726030 - Perspective related CSS not working since version 91.0

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[Denis Kustura]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0

Steps to reproduce:

We have a parallax effect on multiple apps produced by using following CSS:

height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
perspective-origin: 0 0;

Since version 91.0 it stopped working as expected, you can compare by opening this page on multiple browsers: https://stoic-kowalevski-4065ca.netlify.app

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1717161

Comment 3

[Matt Woodrow (:mattwoodrow)]

This is actually a 'regression' from bug 1716904, where we changed to correctly implement the spec regarding how perspective affects descendants.

The perspective property is taken from the parent element of transformed elements - https://drafts.csswg.org/css-transforms-2/#accumulated-3d-transformation-matrix-computation

In the demo, you have two intermediate <div> elements between the perspective, and the parallax transformed elements. Removing these, or adding transform-style:preserve-3d (to "MuiContainer-root MuiContainer-maxWidthLg" and "MuiGrid-root container MuiGrid-container") fixes the issue.

Comment 4

[Denis Kustura]

Thank you Matt, much appreciated!

Comment 5

[Marco Castelluccio [:marco]]

Set release status flags based on info from the regressing bug 1716904

Comment 6

[Miko Mynttinen]

Marking invalid based on comment 3.