Consider occluding case in fullscreen mode #2
Description
The navigation bar separated from the page's background may look fairly poorly for many pages or result in a smaller screen real estate. However, if the navigation bar were to be displayed on top of a page, this could result in breaking UX by occluding page's buttons, links, etc. For instance, a button positioned using position:fixed; bottom: 0 could fall under the navigation bar.
There could be a simple opportunity to address this by taking a page from Apple's "notch" workarounds. By default, the page is laid out to avoid notched area - this results in lower screen space, but avoids conflicts. A page can change this using two mechanisms:
/1/ Using <meta name="viewport" content="viewport-fit=cover">
This signals to the browser that the page "knows" how to work with a partially occluded screen.
/2/ Using env(safe-area-inset-***) properties in CSS
For instance, position: fixed; bottom: env(safe-area-inset-bottom) would ensure that an element is always fully accessible.
A similar strategy could be applied to full screen mode. By default, requestFullscreen({prefersNavigationBar: true}) would layout a fullscreen element to avoid occluded areas. But a script could indicate that it knows how to work with occluded areas by executing, e.g. requestFullscreen({prefersNavigationBar: true, fit: 'cover'}) and by properly using env(safe-area-inset-***) expressions in CSS.