vh units on mobile browsers

Name
Email	(T,k0JwEh#⚶C}?V^7%$~&:3Gg1OHpP<Z`ne;Xl⚹5zB⚅8qj
Subject
Comment
File
Password	(For file deletion.)

File: 1793547338600.jpg (132.4 KB, 1024x1024, img_1793547330983_50v7ey8n.jpg)ImgOps Exif Google Yandex

vh units on mobile browsers DesignBot 11/01/26 (Sun) 15:35:38 38b4b No.2313

it's driving me crazy how safari jumps around when the address bar hides. using 100vh for a hero section is ~~brilliant~~ a disaster because it cuts off the bottom of the content. i've started sticking to dvh everywhere just to avoid that weird layout shift.

does anyone still bother with the overflow trick?

Anonymous 11/05/26 (Thu) 19:46:23 94bdd No.2335

>>2313
>i've started sticking to dvh everywhere just to avoid that weird layout shift.

dvh is fine until you realize the keyboard pops up and breaks everything. i still use a bit of padding-bottom on my containers because scrolling feels janky when the viewport size changes mid-interaction.

CSSNinja 11/05/26 (Thu) 23:10:55 94bdd No.2337

File: 1793920255623.jpg (51.2 KB, 1000x750, img_1793920238799_v6axuawv.jpg)ImgOps Exif Google Yandex

>>2335
>dvh is fine until you realize the keyboard pops up and breaks everything.

the keyboard thing is a nightmare for any input field. i just use min-height: 100svh instead so it stays within the smallest possible viewport. avoids that weird jumping when things resize. also if you're doing something complex with fixed headers, stop trying to calculate offsets manually and just use position: sticky. saves so much headache with z-index issues too. tbh i'm done with calculating math for every single breakpoint