Tabbar position after orientation change wrong


#1

Hi,

I have an app setup with a global tabbar. When I rotate the device (iPhone 7) to landscape and back to portrait, the tabbar is somewhere at bottom: -25px. In landscape it keeps correct, but in portrait is does not come up anymore. I don’t know if this is a bug or if I just missed a specific setting option…


#2

Can you give screenshot or better screen capture video of the issue? And your HTML layout of related part


#3

Sure… this is the capture:

ezgif-3-de8e6f12fde4

As you can see, the Tabbar on iPhone X works like expected. On iPhone 8 and below it goes down after rotating back to portrait.

The layout is pretty simple:

<!-- App root element -->
<div id="app">

	<!-- Statusbar overlay -->
	<div class="statusbar"></div>

	<!-- Your main view, should have "view-main" class -->
	<div class="views tabs ios-edges">
	<!-- Initial Page, "data-name" contains page name -->
	
	
		<!-- Toolbar -->
		<div class="toolbar tabbar ">
			<div class="toolbar-inner">
				<a href="#view-main" class="tab-link tab-link-active">
					<i class="icon f7-icons">home<span class="badge showOffline color-red">OL</span></i>
				</a>     

				<a href="#view-guide" class="tab-link">
					<i class="icon f7-icons">book</i>
				</a>   

				<a href="#view-user" class="tab-link">
					<i class="icon f7-icons">persons</i>
				</a>
				
			</div>
		</div>
    
    
		<div id="view-main" class="view view-main tab tab-active" style="background-color: #1C3A60">		

			<div class="row text-align-center" style="padding-top: 20%">
				<div class="col">
					<div class="preloader color-white" style="width: 44px; height: 44px"></div>
				</div>
			</div>
			
		</div>
		
		<div id="view-guide" class="view tab" style="background-color: #1C3A60">
			
			<div class="row text-align-center" style="padding-top: 20%">
				<div class="col">
					<div class="preloader color-white" style="width: 44px; height: 44px"></div>
				</div>
			</div>
			
		</div>
		
		<div id="view-user" class="view tab" style="background-color: #1C3A60">
			
			<div class="row text-align-center" style="padding-top: 20%">
				<div class="col">
					<div class="preloader color-white" style="width: 44px; height: 44px"></div>
				</div>
			</div>
			
		</div>


	</div>

</div>


<script type="text/javascript" src="framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

btw… on iPhone X there is a blank space on top… is there a special class / setting required to prevent this?


#4

Is this a cordova app or webapp installed to home screen? Try to add viewport-fit=cover to your meta viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

This should fix the issue on iPhone X


#5

Also what is the iOS version?


#6

iOS 12 (latest) - and the viewport setting is like this already… no changes

And it is a pure webapp… added to HomeScreen. In Safari everything is fine - only standalone…


#7

… same with kitchensink if you launch it from home screen…


#8

Looks like it is iOS bug. It just sets window.innerHeight equal to total screen height not considering 20px height of statusbar. Not sure how to fix it but dirty way could be detect it is iPhone < 10 with iOS 12 in portait mode and set its html height to screen.height - 20


#9

hmmm… ok - If I set

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

it works… but in this case I need to use the FW7 statusbar… should work :wink:


#10

I run into this problem too when testing a PWA on an iPhone 6s. Not only after rotating from portrait to landscape and back but also with grid layouts being shifted because of the additional 20px of the status bar.
To be clear, in Safari everything looks great, but these effects appear after adding the App to the Home screen.

I found the following solution here provide by Damien. He figured out that it’s a problem with using viewport-fit=cover.

To get around the problem he suggests to set conditionally the viewport-fit property by adding this bit of script to index.html

if (window.navigator.standalone) {
document.querySelector('meta[name=viewport]').setAttribute('content', 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no');
}

This detects if we are in a standalone web app mode and if so: modify the viewport metatag to be one without viewport-fit=cover. The original metatag is:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">; 

It works for me on an iPhone 6s but I have to confess, I don’t have an iPhone X.

In my opinion this is a flaw in the design of iOS but some others call this bug a feature.

At least that is the opinion of Maximiliano Firtman, in his response to Damien :

If you use the cover-fit viewport attribute you are opting in into being in charge of unsafe areas (such as the notch area on iPhone X), so that’s why the PWA gets a fully fullscreen mode. When you use that viewport tag you should also use the CSS env() properties to add paddings for safe areas.

Hmm… not sure what to think about that.


#11

Ps,
@VIEWSION how did you create those beautiful captures ?


#12

Hey! I’ll check this out… looks more straight forward to me.

regarding the capture… simply with Mac OS Quicktime… or in the latest version (Mojave) with the extended screenshot / screenrecording tool. I just run the app within the iOS simulator (comes with Xcode)… btw… also a good option to test devices you do not have by the hand :wink:


#13

Removing viewport-fit=cover will definitely break iPhoneX layout. So that script check should be modified to something like if(standalone && !isIPhoneX)


#14

Yes you are right Vladimir, that is also the opinion of Damien in his original answer but he (and I who copied his script) forgot to include the iPhoneX condition.