Unused empty at the bottom of screen in standalone mode #38

New issue

Closed

opened 2024-11-03 16:35:14 +00:00 by Rubicon · 3 comments

Rubicon commented

2024-11-03 16:35:14 +00:00

Owner

In standalone mode on iOS, There is a weird empty at the bottom of the screen.

Environment: iOS 18, iPhone 12.

In standalone mode on iOS, There is a weird empty at the bottom of the screen. Environment: iOS 18, iPhone 12.

Picsew_20241104003207.jpeg

310 KiB

Rubicon added the

bug

user-agent/webkit

labels 2024-11-03 16:35:14 +00:00

Rubicon commented

2024-11-07 15:16:16 +00:00

Author

Owner

Could not reproduced on GNOME Web 47.2

Rubicon added this to the v1.1.0 milestone 2024-11-10 08:57:15 +00:00

Rubicon self-assigned this 2024-11-10 08:58:47 +00:00

Rubicon commented

2024-11-10 11:12:24 +00:00

Author

Owner

Rubicon commented

2024-11-10 15:30:01 +00:00

Author

Owner

Seems related: https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom

Deployed a fix based on the answer in this question.

 Fix the bottom gap on iOS standalone.
 https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom
 */
 @media screen and (display-mode: standalone) {
   body {
     width: 100%;
     height: 100vh;
   }
   #root {
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
     width: 100vw;
   }
 }

> Seems related: https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom Deployed a fix based on the answer in this question. https://code.lightstands.xyz/Rubicon/tutu/src/commit/0e33be020d651b482d7f767ba1eeb37e1bbcc205/src/App.css#L13-L29

Rubicon closed this issue

2024-11-10 15:30:01 +00:00