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

The CSS Working Group just discussed `Add vhc value`.

<details><summary>The full IRC log of that discussion</summary>
&lt;dael> Topic: Add vhc value<br>
&lt;dael> github: https://github.com/w3c/csswg-drafts/issues/4329<br>
&lt;fantasai> https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html<br>
&lt;dael> fantasai: Topic is not add a vhc as much as it is solve the problem. Issues is that on mobile we have multiple notions of viewport. viewport units are defined in regards to viewport but on most browsers there's a disappearing address bar<br>
&lt;dael> fantasai: To avoid content from constantly shifting have made that not respond to appear/disappear of address. Problems is deaults being impl makes viewport behavior where 100vh assumes address bar is not visible. THat's not initial state.<br>
&lt;dael> fantasai: Lots of websites design to fit within visible are upon a page load or to have things visible/invisible upon load. Getting that things supposed to be on screen using vh are not visible due to changing height.<br>
&lt;dael> fantasai: Need to solve the problem. Multiple options, could take multiple of them.<br>
&lt;dael> fantasai: Want to hear what others thing<br>
&lt;dael> AmeliaBR: Recap proposals from issue. 1 is don't add any new syntax but encourage any browser with the disappearing nav bar effect to size vh to value when chroma is visible.<br>
&lt;dael> AmeliaBR: Sometimes you'l have more than 100vh visible but on initial load it will fit the screen. That's a guidance to UA without changing language<br>
&lt;dael> AmeliaBR: Original posted suggested alternate unit proportional to the smaller viewport<br>
&lt;dael> fantasai: Third is make the current vh unit to fit the initial load and then add a unit that allows author to take full height of viewport if they want. Inverse of the initial proposal<br>
&lt;dael> fantasai: Problem with that is current keyword is the safer value<br>
&lt;fantasai> s/Problem/Advantage/<br>
&lt;dael> AmeliaBR: Final option is to not add a unit and then add environment variables for disappearing effect so it's similar to inset variables<br>
&lt;dael> florian: Another aspect to problem; it's not just the title, but appearance and disappearance of keyboard. Currently keyboard resizes viewport, but maybe that should only change visual viewport. That's a good idea, but title bar can't do that<br>
&lt;dael> smfr: I don't htink we should derail with keyboard. What you described florian is iOS where it does not change layout height<br>
&lt;dael> florian: If you think it's separate let's keep that out<br>
&lt;dael> smfr: Did any proposals include a unit that changes value when chroma hides? vh that changes<br>
&lt;dael> smfr: It's an option<br>
&lt;dael> TabAtkins: From author feedback they do not want that becaues layout jiggle while it moves<br>
&lt;dael> AmeliaBR: Doesn't behave nicely with things that disappear on scroll. For UX and rendering reasons. For other things like keyboard where it's more discrete it's reasonable.<br>
&lt;dael> smfr: I'm all for avoiding layout jiggle. Seems that pages may be designed such that chrome disappears when you're at bottom<br>
&lt;dael> florian: I think it would be weird to build a page that way<br>
&lt;dael> jensimmons: This is something I've heard a lot, the sentements in this issue. Like many parts of CSS the loudest voices can be most negative. We shoudl work on this and give consideration for all use cases and not jump too quickly and not resolve quickly for what loudest voices say. I'd be happy to work on this and think it through. We need to think about how to animate if they want that. This is more complex. But we should tackle<br>
&lt;jensimmons> +1 to everything should match<br>
&lt;dael> smfr: Related all would match, 100vh, 100% body, window.innerHeight would all mean same thing. Currently don't. Don't know if they can but ti should be a goal<br>
&lt;dael> smfr: Do we know if Andriod has a similar behavior to iOS where 100vh is the chrome hidden state?<br>
&lt;dael> fantasai: Blink has 100vh and 100% on html body meaning different things. 100vh matches Safari. They would like 100% html match but that's currently being a work around for vh not considering address bar<br>
&lt;dael> fantasai: One of the devs that worked on this in Blink said they wanted to argue for 100vh not including address bar but they had to match Safari<br>
&lt;dael> AmeliaBR: Seems like WG took approach for UAs to fill in details and each browser took a different approach and it's not really working and we should come in and specify, but with a range of options for authors so they can do what they want<br>
&lt;AmeliaBR> s/AmeliaBR/jensimmons /<br>
&lt;dael> astearns: Anything else on this to discuss or do we have jensimmons work on the use cases to consider?<br>
&lt;dael> fantasai: I'm happy to kick it to jensimmons to think. It's important and we should not drop, but we can talk later<br>
&lt;dael> astearns: Anything else people want added to discussion?<br>
&lt;dael> astearns: I think smfr list of things that should be eq is excellent<br>
&lt;dael> AmeliaBR: Another option on issue was someone suggesting box sizing like property where authors choose what vh units are relative to. It's another thing to think of<br>
&lt;dael> fantasai: Probably 2 pairs of units would be cleaner and less likely to result in accidental errors<br>
&lt;dael> myles: 2 units might be better cause can use both at the same time. Mode switch you can't use both at same time<br>
&lt;dael> AmeliaBR: Good arguments.<br>
&lt;dbaron> Using both at the same time is probably very hard to do correctly, though.<br>
&lt;dael> AmeliaBR: Lots of options and use cases. Getting through pros and cons for each sounds sensible<br>
&lt;dael> astearns: Let's continue in GH. jensimmons I'll assign it to you?<br>
&lt;dael> jensimmons: Okay<br>
&lt;dael> astearns: We'll discuss again on the call when it's at a good point.<br>
</details>


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

Received on Wednesday, 23 October 2019 16:18:10 UTC