Let's say I have an element that I want to resize so it exactly fills the visual viewport when the keyboard is expanded, as asked in this question:
In the past, I'd use height: 100vh (with some slight modifications for margin). However, as of Chrome 108, when the onscreen keyboard is open, the visual viewport shrinks, but the layout viewport stays the same size. Since 100vh is relative to the layout viewport, the element no longer shrinks when the keyboard opens.
That Chrome blog post gives one solution, adding interactive-widget=resizes-content to the meta viewport tag. This does work, and I can set the element to height: 100vh and cover both cases.
However, I'm wondering if there's another existing CSS-only solution that would work for this case? That is, some kind of viewport-relative unit that is relative to the visual viewport instead of the layout viewport?
