- From: Anthony Frehner via GitHub <sysbot+gh@w3.org>
- Date: Wed, 07 Jul 2021 20:13:43 +0000
- To: public-css-archive@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