Update web index.html height style #3199
Conversation
Fixed the screen height in the web when the statusBar is transparent. Before this change, in the web was displayed an extra white space in the bottom of the screen.
| @@ -40,7 +40,7 @@ | |||
| scroll-behavior: smooth; | |||
| /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */ | |||
| -webkit-text-size-adjust: 100%; | |||
| height: 100%; | |||
| height: calc(100% + env(safe-area-inset-top)); | |||
There was a problem hiding this comment.
Hmm, interesting idea. Have you tested this behavior with react-native-safe-area-context (react-navigation), landscape mode on iOS (resizing header bar)? Could you please add a "test plan" to your PR description:
# Test Plan
...
There was a problem hiding this comment.
Yes it works! I added screenshots to the test plan showing the behavior with react-navigation bottom tabs and header, with SafeArea component and with landscape mode.
There was a problem hiding this comment.
I've tested this on iOS Safari, iOS PWA (with status bar and without), Chrome Android, Android PWA, and desktop Chrome. It appears to work reliably. I think this mostly effects iOS PWAs with translucent status bars (fixing a known bug where the height didn't resize properly).
Why
Fixed the screen height in the web when the statusBar is transparent. Before this change, in the web was displayed an extra white space in the bottom of the screen.
Test Plan
It works perfectly with react-navigation bottom tabs and header, and also with SafeArea component:
Landscape mode:
In iPhone 6/7/8 works normally:
