Re: [csswg-drafts] [scroll-animations] Allow smooth animation from lvh to svh (#10569)

> It would be nice if there was no snap but it would seamlessly adjust the height of the element. So that when you have scrolled half way through between svh and lvh the dvh element height would have changed the same amount.

The spec explicitly [states](https://drafts.csswg.org/css-values-4/#dynamic-viewport-size) that `dvh` is not required to be animated while the dynamic UA UI are being animated:

> The UA is not required to animate the [dynamic viewport-percentage units](https://drafts.csswg.org/css-values-4/#dynamic-viewport-percentage-units) while expanding and retracting any relevant interfaces, and may instead calculate the units as if the relevant interface was fully expanded or retracted during the UI animation. (It is recommended that UAs assume the fully-retracted size for this duration.)

This is done for performance reasons: you wouldn’t want to constantly re-layout things as the UA UI bars slide in and out. Some UAs debounce the change in size, while others only propagate the change on pointerup.

> If the lvh and svh difference was available as env cars maybe you could it that way.

You can calc this by subtracting `100svh` from `100lvh`. See [demo](https://codepen.io/bramus/debug/bGPYQgb) ([source](https://codepen.io/bramus/pen/bGPYQgb))

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10569#issuecomment-2288337953 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 14 August 2024 09:57:10 UTC