search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.69k stars 2.4k forks source link

Header with data-position fixed renders too wide in IOS(8.1) (iPhone4/5/6) #7797

Open johbor opened 10 years ago

johbor commented 10 years ago

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 img_4190

Move the list completely up and tap on the last line img_4191

Tap on the back button to open the list page again img_4192

Now the header is too wide and the right button is gone and the center text is moved to the right img_4193

Open the first page in the IOS simulator screen shot 2014-10-22 at 19 29 06

Move the list completely up and tap on the last line screen shot 2014-10-22 at 19 29 31

Tap on the back button to open the list page again screen shot 2014-10-22 at 19 29 40

Now the header is too wide and the right button is gone and the center text is moved to the right screen shot 2014-10-22 at 19 29 55

Gr. Johan Borchers

rasneu commented 9 years ago

I can confirm that this is an issue in jQuery Mobile and Safari for iOS8. I'm really interested if anyone has found a solution/hot fix for this. I can add that if you disable ajax (data-ajax=false) on the links in the list, the fixed footer and header will be displayed correctly.

johbor commented 9 years ago

I tried the same thing in PrimeFaces Mobile and then the list page with fixed header is rendered good. But the nice effects of the transitions are lost by this solution. And those transitions are what I like about jQuery Mobile.

In the code below you can see ajax="false"

<pm:header title="Details">
    <h:form id="details-header-form">
        <p:commandButton value="Back" action="pm:list" ajax="false" icon="ui-icon-arrow-l" styleClass="ui-btn-left ui-btn-inline" />
    </h:form>
</pm:header>
ldeluca commented 9 years ago

@johbor I created a jsbin page per the contribution guidelines here: http://jsbin.com/bulivu/1/

and will attempt to reproduce. I don't have an iPhone but I'll test on the simulator. Based on your initial comment it sounds like it sometimes is a problem with the iOS simulator.

ldeluca commented 9 years ago

It looks like based on your copied code that your'e using jQM 1.4.4. Perhaps this was fixed with the latest version of jQM 1.4.5. I tested on an iOS 4s simulator running iOS 8.1 and wasn't able to reproduce. See this youtube video: https://www.youtube.com/watch?v=VsTS1vSmGGM&feature=youtube_gdata_player. Feel free to check out the jsbin code that I provided in the last comment to see if the code I'm testing is different from yours.

Update: Just tried again with 1.4.4 and I can't reproduce. I'm running inside an Apache Cordova application.

ldeluca commented 9 years ago

@johbor you can ignore my last messages. I tried from within Safari on the simulator and was able to reproduce.

johbor commented 9 years ago

Hello, I tried the code on http://jsbin.com/bulivu/1/ on the IPhone and on the simulator. I was able to reproduce the behavior. Actually it happens at a specific situation. Open safari in the iPhone Open the url http://jsbin.com/bulivu/1/ The list appears and the Safari address bar is still visible. Also the Safari bottom toolbar. Tap on a line the next page appears and tap on the back button and everything is ok. But then swipe the list up and the Safari address bar disappears and also the bottom toolbar of Safari. As soon as this has happened and then tapping on a line and on the next page tap on the back button the list appears but the fixed header renders too wide. This is what constantly happens in PrimeFaces Mobile. On the iPhone the bug is for sure reproducible with the code http://jsbin.com/bulivu/1/ if you move the list complete up and the address bar of Safari appears again and the bottom toolbar of Safari appears again, then tap on the last or another line and on the back button of the next page and the list appears again with a wrong header. You can see that the list is first drawn without header and the the header is drawn on top of the screen but too wide.

arschmitz commented 9 years ago

@johbor have you reproduced this outside the simulator i cannot reproduce on an iPhone 5s with iOS8.1

arschmitz commented 9 years ago

@johbor nevermind I just managed to do it

johbor commented 9 years ago

Step 1 on the iPhone 4s Swipe the list up and tap on a line img_4236

Step 2 Go back and the header is rendered too wide img_4237

On an iPhone 5 IOS 8.1 you have to swipe up completely until the bottom toolbar appears again in Safari and after that the bug is reproducible.

0not commented 9 years ago

I believe this is the same issue that we were having, but with a footer instead. We discovered that using "minimal-ui=1" in a viewport meta tag resolved the issue (though, not the underlying cause).

<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui=1">

The "=1" might be unnecessary. I'm not the one who found this attribute, nor the one who implemented it. Check out the release notes for iOS 7.1 (search on page for "minimal-ui").

rasneu commented 9 years ago

@0not Thanks for sharing! However this fix doesn't seem to work - at least not for me. The issue exists only in Safari for iOS 8, and not iOS 7, according to the tests i have made. It's a shame since i'm really interested in a fix. As of now i have disabled the transition on iPhones, as the only working solution i have found this far.

0not commented 9 years ago

@rasneu Try getting rid of the initial and max scale in your viewport meta tag.

<meta name="viewport" content="width=device-width, user-scalable=no">

I made a jsbin here. It seems to work for me. At my company, we realized yesterday that minimal-ui might not have been what fixed it for us, but just the fact that we got rid of the initial and max scaling when we tested minimal-ui. Hope it works!

EDIT: If that viewport above doesn't work, try adding "minimal-ui=yes" (which is what we're sticking with):

<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui=yes">
johbor commented 9 years ago 
<meta name="viewport" content="width=device-width, user-scalable=no">

The above configuration of the viewport helps. But then you introduce another problem. The second page is not rendered the right way. See the screen shot. This can also be solved to make the header also fixed for the second page. But then the normal smooth transitions are very ugly. img_4253

richardstevens commented 9 years ago

Looks like the issue is within the initial-scale or minimum-scale. By removing both of these in the meta viewport tag will fix the issue. Having the maximum-scale still in there appears to be ok and is needed for iPad and Desktops otherwise it renders the text too large.

stephenhouser commented 9 years ago

Removing any data-transition= appears to have mitigated the issue in my project. I was using 'slide' transitions but reproduced the problem with flip. (update, flip might be ok, still testing).

Somewhere between pagebeforeshow and pageshow the size of the fixed navbars get changed to (on the iOS simulator) 427 when they should be 320.

stephenhouser commented 9 years ago

For reference, this is on iOS8 in the simulator. The viewport meta tag is: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui=yes" />

Testing results:

fade: ok pop: ok flip: mixed results turn: ok flow: broken slidefade: ok slide: broken slideup: ok slidedown: ok

I have switched to slidefade as it appears to work consistently and has a similar effect to slide.

J3rome commented 9 years ago

Got the same issue with slide transition on a iphone 5s. Anybody found a workaround?