You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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?
The text was updated successfully, but these errors were encountered:
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
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.
Uh oh!
There was an error while loading. Please reload this page.
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-propagationCould 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
andperspective
is set on thebody
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?
The text was updated successfully, but these errors were encountered: