Giters

mvasin / react-div-100vh

A workaround for the '100vh' issue in mobile browsers

Home Page:https://react-div-100vh.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

On entering a text field on safari a bunch of additional space is created at the bottom

stueynet opened this issue · comments

commented

When you focus into a text field on safari it causes a bunch of additional white space below the full height wrapper. Here are some screenshots. This was done on an ios simulator.

Default Focused with keyboard Focused without keyboard
Screen Shot 2021-04-13 at 08 13 05 Screen Shot 2021-04-13 at 08 12 16 Screen Shot 2021-04-13 at 08 18 35
commented

Following up with an update. It appears if you disable the ios safari toolbar the behaviour is fine.

Screen Shot 2021-04-13 at 09 04 22

commented

Hi, @stueynet and thanks for sharing.

I think I can reproduce the above on the demo page: if I click into the input field and scroll till the bottom, and then pull again (as if trying to scroll further to the bottom), I see the URL bar at the top from slim turns to a regular height, and simultaneously white space adds up at the bottom.

But I see the same when I switch the radio button from "The component" to "a regular <div style={{height: '100vh'}}>" component. So it doesn't seem to be an issue with this library, but rather a Safari issue. WDYT?

commented

Hi, @stueynet and thanks for sharing.

I think I can reproduce the above on the demo page: if I click into the input field and scroll till the bottom, and then pull again (as if trying to scroll further to the bottom), I see the URL bar at the top from slim turns to a regular height, and simultaneously white space adds up at the bottom.

But I see the same when I switch the radio button from "The component" to "a regular <div style={{height: '100vh'}}>" component. So it doesn't seem to be an issue with this library, but rather a Safari issue. WDYT?

Yeah likely safari.