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

> Ah, hm, is this the issue? It's really better to have something over or underflowing than have things possibly shift when the user scrolls?

Correct! At least, that's what Safari and Chrome teams agreed as well. Here's a brief history of vh units:

1. `vh` units are added to browsers. `1vh` changes values depending on UA chrome sizes. This is a bad UX because content is _constantly_ shifting as a user scrolls up and down the page. 
2. Safari changes the value of `1vh` to be whatever the height when UA chome is minimal. Here's a [quote on their reasoning, around 2015](https://bugs.webkit.org/show_bug.cgi?id=141832):
>This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)

>The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

>It is hard to show you the "looks like shit" part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

>Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

>From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

3. Chrome follows suit [about a year later](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4)

So, that's how we got here -- `vh` units used to change dynamically, then it was determined that was horrible (and honestly it was), but now we're left with a `vh` value that only reflects the small view size but not the large view size, which makes full screen designs difficult to work with. 

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

Received on Tuesday, 15 October 2019 21:50:13 UTC