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:

https://user-images.githubusercontent.com/3054066/124822498-2f98d680-df2d-11eb-9efa-853fb0cff19d.mov

Observations:

- 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