Header with data-position fixed renders too wide in IOS(8.1) (iPhone4/5/6) #7797
Description
There is a problem with rendering the fixed header in a page with a long(er) listview. When the first page is opened everything looks fine and the button is rendered in the header on the right side. Moving the list completely up and then tapping on the last line opens the second page witht e.g. details. Then tapping on the back button in the header of the detail page opens the list page again but then the header is wide. The button on the right side of the header is not visible anymore and the central text is shifted to the right.
All things like a button bar or toolbar in the header will diplay wider when the header is wider then it should be.
This happens on the iPhone4s (IOS 8.1) as on the IOS simulator for all iPhones on the Mac.
It happens NOT on the iPad (IOS 8.1) and also not for all iPads on the IOS simulator.
It happens NOT on the Windows Phone.
It happens NOT on Android.
It happens NOT on the iPhone with the Chrome and Opera browser.
The remarkable difference between the iPhones and the iPad simulations is that pushing up the list causes Safari on the iPhones making the address bar disappear and only showing the ip address in text.
And exactly when this happens it goes wrong with PrimeFaces Mobile.
I discovered this while using PrimeFaces Mobile (JSF) which uses JQuery Mobile. But there the bug is even worse. When the list page opens and after that tap on the first line and back, everything is ok. But as soon the list moves a little bit up, Safari lets disappear the address bar, and tapping on a random line in the list and back from the detail page the header width is too big and the right button is not visible anymore. So using the fixed header in combination with the list is a no go in PrimeFaces Mobile. I can only use the inline option.
I will give the JQuery Mobile page that I tested on the iPhone and the simulator.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div id="list" data-role="page">
<div data-role="header" data-position="fixed">
<h1>Persons</h1>
<a href="#search" data-transition="slide" class="ui-btn ui-btn-right ui-icon-search ui-btn-icon-left">Search</a>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="false">
<li><a href="#detail" data-transition="slide">Adele</a></li>
<li><a href="#detail" data-transition="slide">Agnes</a></li>
<li><a href="#detail" data-transition="slide">Albert</a></li>
<li><a href="#detail" data-transition="slide">Billy</a></li>
<li><a href="#detail" data-transition="slide">Bob</a></li>
<li><a href="#detail" data-transition="slide">Calvin</a></li>
<li><a href="#detail" data-transition="slide">Cameron</a></li>
<li><a href="#detail" data-transition="slide">Chloe</a></li>
<li><a href="#detail" data-transition="slide">Christina</a></li>
<li><a href="#detail" data-transition="slide">Diana</a></li>
<li><a href="#detail" data-transition="slide">Gabriel</a></li>
<li><a href="#detail" data-transition="slide">Glen</a></li>
<li><a href="#detail" data-transition="slide">Lucile</a></li>
<li><a href="#detail" data-transition="slide">Mark</a></li>
<li><a href="#detail" data-transition="slide">Ralph</a></li>
<li><a href="#detail" data-transition="slide">Rose</a></li>
<li><a href="#detail" data-transition="slide">Tuck</a></li>
<li><a href="#detail" data-transition="slide">Valarie</a></li>
<li><a href="#detail" data-transition="slide">Will</a></li>
<li><a href="#detail" data-transition="slide">Zack</a></li>
</ul>
</div>
</div>
<div id="detail" data-role="page">
<div data-role="header">
<a href="#list" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-arrow-l ui-btn-icon-left" data-transition="slide" data-direction="reverse">Back</a>
<h1>Details</h1>
</div>
<div role="main" class="ui-content">
<p>Detail content goes here.</p>
</div>
</div>
<div id="search" data-role="page">
<div data-role="header">
<a href="#list" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-arrow-l ui-btn-icon-left" data-transition="slide" data-direction="reverse">Back</a>
<h1>Search</h1>
</div>
<div role="main" class="ui-content">
<p>Search content goes here.</p>
</div>
</div>
</body>
</html>
The first 4 pictures are from the iPhone and picture 5,6,7 and 8 are from the IOS simulator.
Open the first page on the iPhone
Move the list completely up and tap on the last line
Tap on the back button to open the list page again
Now the header is too wide and the right button is gone and the center text is moved to the right
Open the first page in the IOS simulator
Move the list completely up and tap on the last line
Tap on the back button to open the list page again
Now the header is too wide and the right button is gone and the center text is moved to the right
Gr. Johan Borchers