填充：env（安全区域插入顶部）不起作用

Question

我正在用Angular 8编写一个Web应用程序，并且想在iPad上实现全屏模式。

在index.html中，我添加了：

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

和

viewport-fit=cover

在我最外层组件的CSS文件中：

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

如果我在iPad Pro（最新一代）的桌面上放置一个快捷方式，并使用该快捷方式以全屏模式打开应用程序，则一切正常。填充使应用程序处于安全区域内。

不过，我想使用户更容易切换到全屏模式，因此我实现了以下示例：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']);
                    }
                }
            }
        }
    }

它将应用程序切换到全屏模式，但不遵循env（安全区域插入顶部），因此应用程序的顶部位于日期，电池剩余时间等范围内。

env（安全区域插入底部）正常工作。

那么当我使用JavaScript函数toggleFullScreen（）进入全屏模式时，如何使env（safe-area-inset-top）正常工作？