Bug with Modal component and 100vh height

[robizzt]

Hello,

I have had trouble with modals on mobile devices when scrolling down and URL bar hides. Buttom of modal is kinda cut off untill I release screen. Then I found your example and noticed that 100vh works great on your example (https://bokand.github.io/demo/urlbarsize.html). But when I recreated similar modal scenario on your example same thing happend.

<div style="
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    overflow: hidden auto;
    background-color: #ccc;
    z-index: 100;
"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac odio tempor orci dapibus ultrices in iaculis. At varius vel pharetra vel turpis nunc eget. Viverra maecenas accumsan lacus vel facilisis volutpat. Tortor id aliquet lectus proin nibh nisl condimentum. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Ac ut consequat semper viverra nam libero justo laoreet sit. Ac auctor augue mauris augue neque gravida in fermentum. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Blandit libero volutpat sed cras ornare arcu. Pharetra vel turpis nunc eget lorem dolor sed viverra. Eget lorem dolor sed viverra ipsum nunc. Egestas erat imperdiet sed euismod nisi. Convallis tellus id interdum velit laoreet. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Adipiscing at in tellus integer.<br>Eget mi proin sed libero enim sed faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. In egestas erat imperdiet sed euismod nisi. Amet consectetur adipiscing elit pellentesque habitant morbi tristique. A lacus vestibulum sed arcu non. Fames ac turpis egestas maecenas pharetra. Arcu non sodales neque sodales ut etiam sit amet nisl. Massa massa ultricies mi quis hendrerit dolor magna. Pulvinar mattis nunc sed blandit libero volutpat sed cras. Nunc id cursus metus aliquam eleifend mi in. Aliquet bibendum enim facilisis gravida neque convallis a cras. Leo in vitae turpis massa sed elementum. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Et malesuada fames ac turpis egestas. Non pulvinar neque laoreet suspendisse. Nibh tellus molestie nunc non blandit massa enim nec. Donec enim diam vulputate ut pharetra sit amet.</p></div>

If you put this element in your example right after opening body tag (or before closing body tag) and add "overflow: hidden" on body you should see the problem when URL bar is showing and you scroll down.

Problem only happens if modals child height is heigher than modal height and if body has overflow hidden.

Is that how it's supposed to be? If not, how can I fix it?

[robizzt]

"The "visual viewport" is used as the root container for position: fixed elements. It is resized in response to the URL bar."

[robizzt]

Same thing happens if I set height in px. Why?

[bokand]

Can you provide an example file/url I can look into?

[robizzt]

I'm using Android and Chrome (80.0.3987.119).

In this example modal has height 100vh, but you can set height in pixels that equals your device height, same thing will happen. Funny thing is that, even with 100vh or pixels (in my case on landscape orientation height is 336px), in inspector I can see that height is always full height (336px without URL bar), but on scroll, modal still gets cut off when URL bar hides.