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: