Progressive Web App app-level scrolling behavior on IPhone / Safari is displaying theme background

Viewed 116

I am trying to get rid of the annoying app-level scrolling behavior for my Progressive Web App when launched from the iPhone's home screen. When the user pushes up or pulls down on the app, the background theme color of the PWA is revealed. Of course I want a more "app-like" feel where it doesn't do that. This seems to only happen on Safari on the iPhone - Chrome on Android doesn't behave that way. The relevant CSS I have tried is below. In the web manifest I have tried "display": "standalone" and "display": "fullscreen". I made a 13 second YouTube video of the issue here: https://youtube.com/shorts/6uP7VxZ1mdE

enter image description here

html, body { 
    margin: 0; 
    font-family: Roboto, "Helvetica Neue", sans-serif;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: contain;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
 }
0 Answers
Related