Issue with scrolling on mobile even after height is viewport height ! Likely address bar issue
So I’ve got 2 videos I’m gonna send below first one is from the dev tools in mobile view so that doesn’t account for the address bar we have in chrome mobile layouts
Second one is a screen recording of the app from mobile browser so address bar is present on that one
Now the issue is my app page is set to full vh so 100vh right… and that means there’s shouldn’t be any scroll bars when the page loads as the page is just the viewport height and not more
Now in my first video all is well! No scroll bars r shown and that’s from the dev tools in chrome
So when I scroll my date headers in the messages go behind the header where the receivers username is as u can see in the video which is what I want
Now when I open the app in phone u can see that I’m able to scroll in the page even though it’s set to 100vh height now I’ve done a lot of research and I’ve found that chrome on phone doesn’t take into account the address bar so that causes issues with the layout
That gives me a big as u can see in the second recording that my date headers in messages overlap over the persons username in the chat window… now how could I fix that?
Now I’ve come across units like dvh / svh / lvh
I wanted to ask what is the best unit in this case. I’ve read that dvh causes a slight flicker when the layout adjusts as the address bar shrinks right ! But in chrome phone the address bar doesn’t shrink not sure if It’s an issue but I’m on iPhone fyi!
And svh would be the best bet but its browser support isn’t up yet?
I wanted to know how I could go about fixing this issue ?
Would I have to change all my vh to dvh/svh in my css code ?
Second one is a screen recording of the app from mobile browser so address bar is present on that one
Now the issue is my app page is set to full vh so 100vh right… and that means there’s shouldn’t be any scroll bars when the page loads as the page is just the viewport height and not more
Now in my first video all is well! No scroll bars r shown and that’s from the dev tools in chrome
So when I scroll my date headers in the messages go behind the header where the receivers username is as u can see in the video which is what I want
Now when I open the app in phone u can see that I’m able to scroll in the page even though it’s set to 100vh height now I’ve done a lot of research and I’ve found that chrome on phone doesn’t take into account the address bar so that causes issues with the layout
That gives me a big as u can see in the second recording that my date headers in messages overlap over the persons username in the chat window… now how could I fix that?
Now I’ve come across units like dvh / svh / lvh
I wanted to ask what is the best unit in this case. I’ve read that dvh causes a slight flicker when the layout adjusts as the address bar shrinks right ! But in chrome phone the address bar doesn’t shrink not sure if It’s an issue but I’m on iPhone fyi!
And svh would be the best bet but its browser support isn’t up yet?
I wanted to know how I could go about fixing this issue ?
Would I have to change all my vh to dvh/svh in my css code ?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
