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 ?
2 Replies
svh will account for the smallest screen size. dvh will adjust as the screen resizes, which can cause a very minor flicker depending on how it loads.
It's hard to articulate the difference and the pros and cons of each approach depends very much on the exact application, there's no hard and fast rule of which one to use over the other (which is why dynamic units exist). If you're seriously concerned about the impact of a slight layout adjustment like this, by far the best solution is to test both variants on an actual device.
As for browser support, small/large/dynamic viewport units have 93% support and have been baseline for 3 years. If you're concerned that's not sufficient, you can always set min-block-size: 100vh; min-height: 100svh; and browsers which don't support the newer units will fall back to 100vh.tysm for ur reply! i guess theres no really big difference between svh and dvh and either should work fine
now its my first time running into an issue like this and btw i am using tailwindCSS where i set
h-screen so how would i go about that in tailwindCSS like adding the vh as fallback and using svh for example for everything?
do i have to change every single instance of vhto svh in my tailwindCSS styles?