How to display F7 correctly on iPhoneX in full screen mode?

Questions
1

This is very special iffy problem :see_no_evil::see_no_evil::see_no_evil::see_no_evil:

I am trying to use EXPERIMENTAL iOS12.1 feature:
full screen API (needs to be allowed in EXPERIMENTAL Safari settings)…

  • It is great that Apple finally support full screen API — and I am trying to use this API because another Apple’s bug…

  • Our app also needs another modern API named WEBRTC, for video camera…

  • But in the same time we CAN NOT run this app in iOS home-screen mode — because Apple’s WEBRTC don’t work in home-screen mode :frowning: It is total hell…

So, there is the demo:
https://martin.byethost18.com/f7.html

#iOS version of Safari includes some CSS constants that can be used with viewport-fit=cover in order to get/set iPhoneX safe area…

…but this CSS WORKS NOT WHEN SWITCHING USING fullScreen API in iOS 12.1:

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

So I tried artificially create safe area at top and bottom using this:

$$(’#app’).attr(“style”,“margin:44px 0 0 0; height: calc(100% - 80px);”);

It works… with only caveat that bottom icon tab bar DO NOT WORK (it seems like it gets NO touch events, looks like dead zone area at bottom)…

So main QUESTION is: It is possible to get working tab bar in this NONSTANDARD situation?

2

PS: try to tap “loupe” icon, which call full screen API…

3 
<body>

<div id="app" style="color-theme-gray">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>

<!-- Left panel with cover effect -->
<div class="panel panel-left panel-cover">

<div class="views">
		<!-- Bottom Tabbar -->
		<div class="toolbar tabbar tabbar-labels toolbar-bottom-md" id="tabbar">
			<div class="toolbar-inner">
				<a class="tab-link tab-link-active" href="/1/" alt=".view-1" data-name=".index-1"><i class="icon f7-icons">social_instagram</i><span class="tabbar-label">Hledat KKS</span></a> 
				<a class="tab-link" href="/2/" alt=".view-1" data-name=".index-2"><i class="icon f7-icons">list<span class="badge color-red">4</span></i><span class="tabbar-label">Nalezené</span></a> 
				<a class="tab-link" href="/3/" alt=".view-1" data-name=".index-3"><i class="icon f7-icons">check_round</i><span class="tabbar-label">Vybrané</span></a> 
			</div>
		</div>

…

4

OK, I know it IS infernally devilish code… but is there another option, for plain web application?

5

https://bugs.webkit.org/show_bug.cgi?id=180551

getUserMedia fails with HOME SCREEN mode on iOS, navigator.mediaDevices are undefined

test pen:

in HOME SCREEN mode on iOS we get error message: navigator.mediaDevices UNDEFINED!