CODEWITHSUNDEEP
ioscssangularwebkit
Jørgen Rasmussen
Jørgen Rasmussen

Reputation: 1353

padding: env(safe-area-inset-top) is not working

I am writing a web app in Angular 8 and I want to implement full screen mode on an iPad.

To index.html I have added:

<meta name="apple-mobile-web-app-capable" content="yes">

and

viewport-fit=cover

In the CSS file of my outmost component I have:

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

If I place a shortcut on the desktop on my iPad pro (newest generation) and use that to open the app in fullscreen mode everything works nicely. The padding is keeping the app within safe areas.

enter image description here

I would however like to make it easier for user to switch to fullscreen mode, so I have implemented this example: https://bubblin.io/blog/fullscreen-api-ipad

toggleFullScreen() {
        if (document.fullscreenElement || document['mozFullScreenElement'] || document['webkitFullscreenElement']) {
            if (document['cancelFullScreen']) {
                document['cancelFullScreen']();
            } else {
                if (document['mozCancelFullScreen']) {
                    document['mozCancelFullScreen']();
                } else {
                    if (document['webkitCancelFullScreen']) {
                        document['webkitCancelFullScreen']();
                    }
                }
            }
        } else {
            const _element = document.documentElement;
            if (_element.requestFullscreen) {
                _element.requestFullscreen();
            } else {
                if (_element['mozRequestFullScreen']) {
                    _element['mozRequestFullScreen']();
                } else {
                    if (_element['webkitRequestFullscreen']) {
                        _element['webkitRequestFullscreen'](Element['ALLOW_KEYBOARD_INPUT']);
                    }
                }
            }
        }
    }

It switches the app to fullscreen mode, but it doesn't respect env(safe-area-inset-top) so the top of the app is in from of the date, battery left, etc.

enter image description here

The env(safe-area-inset-bottom) is working correctly.

So how can i make env(safe-area-inset-top) work correctly when I use the javascript function toggleFullScreen() to go to fullscreen?

Upvotes: 4

Views: 4181

Answers (1)

intr0
intr0

Reputation: 11

Instead of env(safe-area-inset-top), which, combined with the other three "safe areas", is designed for iOS devices, try:

    header {
      position: fixed;
      left: env(titlebar-area-x);
      top: env(titlebar-area-y);
      width: env(titlebar-area-width);
      height: env(titlebar-area-height);
    }
    
    main {
      margin-top: env(titlebar-area-height);
    }

And write a javascript function to see if the user is on a iOS device; if so, the standard (what you're using) CSS is used. If not, the CSS from Mozilla is used.

Upvotes: 1

Related Questions