search

mvasin / react-div-100vh

A workaround for the '100vh' issue in mobile browsers
https://react-div-100vh.vercel.app
MIT License
1.07k stars 59 forks source link

Not recommended IMHO #75

Open steida opened 3 years ago

steida commented 3 years ago

So I tried all 100vh hacks I found, and my conclusion is that native iOS behavior is not fixable. Every fix has its own quirks, even this one. I am not sure whether it's race conditions in CSS rendering engine or what, but my personal recommendation is to not try to fix iOS Safari anymore. We should not fight with it, we should embrace it in our designs. Btw, when the web app is linked to the home screen, it runs in full-screen without any bars and everything works as I expect.

mvasin commented 3 years ago

Hi @steida! I share your point and also gave up on re-creating the app-like "fullscreen, no-scroll" UIs on the web. There are cases such as when you need an action button at the bottom of the screen by design, but probably, some safety margin would work better (and wouldn't require reflow).

I will think about how to incorporate this into the readme.

steida commented 3 years ago

@mvasin Yeah and the bottom footer is useful only for pages without content but how useful such pages are? The irony is, Safari switched to the bottom navigation bar. They should eat their own dog food 🤪 Just for fun, the same issue is blocking Safari scroll on focus. Yeah, it's doable, but the side effects are even more surprising than 100vh. The solution for the scroll on focus is simple, do not autoFocus on mobile. Then, a user is not surprised by scrolling. The funny thing is both issues are almost eliminated when the app is run as an icon from the home screen.

"fullscreen, no-scroll" UIs on the web are doable. Just put there some safety margin and it's all good. Do not try to fix "native" behavior via hacks. Period.

steida commented 3 years ago

@mvasin Look https://twitter.com/bdc/status/1455888984849145857