W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2021

Re: [csswg-drafts] [css-values-4] Add vhc value (#4329)

From: Anthony Frehner via GitHub <sysbot+gh@w3.org>
Date: Wed, 07 Jul 2021 20:13:43 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-875900628-1625688821-sysbot+gh@w3.org>
I wanted to see for myself and verify what @johannesodland posted above, and here are my thoughts/observations (that are mostly just a rehash of what Johannes said above):

Using this page as a playground https://codepen.io/afrehner/full/MWmyZEq and having downloaded the XCode 13 beta in order to get access to the mobile version of iOS 15's Safari, I was able to take this video:



- On page load, `vh == lvh == (vh as currently defined)`
- After ~1 second without any user interaction, `vh == svh`
- Scrolling downward, `vh == svh`
- Scrolling upward or tapping anywhere, `vh == lvh`

Essentially, Safari is now treating `vh == dvh`, and with that, all the good AND bad that comes with it. For example, notice the amount of layout shift when looking at section `four`; because all the content above it is using (d)`vh`, when the value of `vh` changes, `four` dramatically shifts where it is. This will only get worse the more content above you that uses the (d)`vh` value. We're now (kind of) back to where we were in the beginning, with `vh` being dynamic!

I think, more than anything, this emphasizes the importance of getting the `s`/`d`/`l` `*vh` units standardized soon, so that browsers vendors can experiment with their interfaces while allowing developers to build websites that won't be changing on them over time.

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

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 7 July 2021 20:14:55 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:39 UTC