[css-transforms-2] Should perspective on root propagate to viewport?

[johannesodland]

Some properties that apply to scroll containers are propagated to the viewport. Examples are scroll-padding and scroll-snap-type: https://github.com/w3c/csswg-drafts/issues/3740 and overflow-* properties: https://drafts.csswg.org/css-overflow/#overflow-propagation

Could we propagate the perspective property as well?

Motivation

The perspective property is often used to create a parallax scrolling effect. To achieve this effect overflow-x and perspective is set on the body element make it a scroll container and the reference box for css transforms. Translating children in the z-axis creates a parallax effect when scrolling.

A full description of how to achieve this can be found here: https://redstapler.co/css-parallax-scrolling-effect/ Also described here: https://developers.google.com/web/updates/2016/12/performant-parallaxing

Making body a scroll container degrades the user experience especially on mobile devices. Browser chrome does not move out of the way when the user scrolls down the page.

If perspective on the root element propagated to the viewport, the parallax effect could be achieved without creating a new scroll container?

[Walrus117]

Agreed. And I can't find a way around it. Did you get anywhere with this?

[legendofmi]

This is a very good point. Another issue of using the body is that on iOS/ipadOS, tapping on the top no longer scrolls to the top.

Although, parallax could now be achieved with using animation-timeline: view(); (currently, only available on chrome), the performance of the parallax achieved via perspective CSS function is much better.