Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
johannesodland opened this issue Dec 11, 2020 · 2 comments
Open

Comments

@johannesodland
Copy link

johannesodland commented Dec 11, 2020

Some properties that apply to scroll containers are propagated to the viewport. Examples are scroll-padding and scroll-snap-type: #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?

@johannesodland johannesodland changed the title [css-transforms-2] Could perspective on root propagate to viewport? [css-transforms-2] Should perspective on root propagate to viewport? Feb 16, 2021
@Walrus117
Copy link

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

@legendofmi
Copy link

legendofmi commented May 30, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants