Search jQuery

jQuery Forum

Page Navigation Issues under IOS9 (beta)

in jQuery Mobile • 5 years ago

After receiving complaints from several users, I loaded up IOS9 (beta) to test my existing app that works fine under IOS8.4. Much of it works but I seem to be having some serious page navigation issues with the headers that were not present in IOS 8.x. I'm running JQuery mobile 1.4.4.

The bulk of the problems appear to be with navigation header buttons using 'data-rel="back"':

<div data-role="header" data-position="fixed">
        <h1>Edit Stuff</h1>
        <a href="#" data-icon="back" data-rel="back">Cancel</a>
        <a href="#" id="edithopok" class="ui-btn-right" data-icon="check" data-rel="back">Save</a>
    </div>

The above is the header for a simple page div that is a "second level" page. There is a Home page (with a list of items on it) and then below that say an "Options" page with a list of optoins on it, then this page. So it would be Home->Options->Edit Stuff in the history of current pages visited when this page is active.

Under IOS9, hitting the Cancel button seems to sometimes take the program to the Home page instead of back to the previous page in the history (it should have gone to Options). And visiting this page again and hitting cancel will sometimes not go anywhere at all (i.e. it just stays on the same page) - so it looks like a lock-up to the user.

I tried setting "href=#options" but this did not correct it. However if I set "href=#options" and remove the "data-rel='back'" it will work fine. Unfortunately this is not a good option for many pages that may be accessed from multiple (non fixed) entry pages. I really want "data-rel=back" to go back!

I'm quite confused with this behavior - is there a known issue with "data-rel=back" under IOS9? This seems to be broken throughout the app (though somewhat randomly, as a few pages navigate properly).

Replies(37)

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

I have an app that has similar header

<div data-role="header" data-position="fixed">
<a href="#" data-iconpos="notext" data-shadow="false" data-iconshadow="false" data-icon="back" data-rel="back" data-direction="reverse"></a>
<a href="#search" data-iconpos="notext" data-shadow="false" data-iconshadow="false" data-icon="search" data-rel="open" class="user-panel"></a>
<h1>Main menu</h1>
</div>

I use jQM 1.4.5, and I have tested on a IOS 9 iPad. I don’t seem to have a similar problem,

Try upgrading to 1.4.5.

What is different about the few pages that work?

JΛ̊KE

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

Unfortunately upgrading to 1.4.5 did not solve the problem. Does anyone have other suggestions as I'm desparate to get this working and into Apple before they release IOS9?

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

Make a very simple demo that you can share. Share it to the developers and here.

jquery-mobile/CONTRIBUTING.md at master · jquery/jquery-mobile

JΛ̊KE

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

The app does quite a bit of dynamic page changing (to reuse pages that may appear several times). So for instance lets say there is a page to view a recipe (data item). You might enter that page from the "Local Recipes" page or you might also enter that recipe view page from a "Cloud Recipes" page. The program does this using $mobile.changePage() tied to a button click. I'm wondering if this is possibly the issue.

So there are two (or more) ways to navigate to the "View Recipe" page. Now on the "View Recipe" page I simply have the back button (and save button) with the attribute "data-rel='back'" so no matter how I got to View Recipe I can go back to the previous page in the history.

In the past this has always worked - using the data-rel="back" takes us back to the previous page. However under IOS9 this appears to be universally broken - clicking on the back button either does nothing or takes me to the Home page. Interestingly any "click" events appear to be still firing, so if you click on the save button it will do the "save" event but it won't navigate back to the previous page.

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

The program does this using $mobile.changePage() tied to a button click. I'm wondering if this is possibly the issue.

Possibly.

JΛ̊KE

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

Here's the shortest example I could come up with. Basically if you navigate from the home page to Options->Bitterness it will take you to the "#hopopts" page. Next if you hit the "Cancel" button the program will hang under IOS9 and will not navigate back to "#options".

However if I remove the "data-rel='back'" from the "Cancel" button on the #hopopts page it will navigate back. For example the "Save" button works but "Cancel" does not.

The problem is that I have quite a few more complex pages that NEED the "data-rel=back" functionality to actually go back a page - which is not happening under IOS9.

I apologize for the styling/image issues. My app has some custom styling (beersmith.css) that I did not remove from this example. However I think this example pretty clearly shows the problem - the back button is simply not working when you go more than one menu level deep on IOS9.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />

<title>BeerSmith2</title>

<script type ="text/javascript" charset ="utf-8" src ="cordova.js"></script>

<meta charset = 'utf-8' >

<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />

<link rel ="stylesheet" href ="jquery.mobile-1.4.5.min.css" />

<link rel ="stylesheet" href ="jquery.mobile.structure-1.4.5.min.css" />

<link rel ="stylesheet" href ="jquery.mobile.theme-1.4.5.min.css" />

<link rel ="stylesheet" href ="beersmith.css" />

<script src ="jquery-1.11.3.min.js"></script>

<script src ="jquery.mobile-1.4.5.min.js"></script>

<script type ="text/javascript">

// Called once we have jQuery and beersmith.js loaded...

$( function() {

console.log("jQuery loaded");

navigator.is_mobile = true;

document.addEventListener("deviceready", onDeviceReady, false);

} );



// PhoneGap is loaded and it is now safe to make calls PhoneGap methods

function onDeviceReady() {

console.log("onDeviceReady: PhoneGap loaded");

$.mobile.defaultPageTransition = "none";

$.mobile.defaultDialogTransition = "none";

}

</script>

</head>

<body>



<div data-role ="page" id ="home">

<div data-role= "header" data-position= "fixed" >

<h1><img src ="images/Recipe16.png" width ="16" height ="16" /> BeerSmith 2 </h1>

</div>

<div data-role ="content" id ="home-content">

<ul data-role= "listview" data-inset= "true" >

<li><a href ="#options"><div class ='imgwrap32'><img src ='images/Options32.png' height ="32" width ="32"/></div>

<h3>Options</h3>

<p>Options and Settings</p>

</a></li>

</ul>

BeerSmith Mobile <span id = "bs-version2" >version</span><br />

</div>

</div>





<div data-role ="page" id ="options">

<div data-role= "header" data-position= "fixed" >

<a href = "#home" data-icon = "back" >Home</a>

<h1>Options</h1>

</div>

<div data-role = "content" >

<ul data-role= "listview" data-inset= "true" >

<li><a href ="#hopopts"><div class ='imgwrap32'><img src ='images/Hops32.png' height ="32" width ="32"/></div>

<h3>Bitterness</h3>

<p>Bitterness calculation settings</p></a></li>

</ul>

</div>

</div>





<div data-role ="page" id ="hopopts">

<div data-role= "header" data-position= "fixed" >

<h1>Hop Options</h1>

<a href = "#options" data-icon = "back" data-rel = "back" >Cancel</a>

<a href ="#options" id ="hopoptsok" class ="ui-btn-right" data-icon ="check" > Save </a>

</div>

<div data-role= "content" data-inset= "true" >

<form method = "POST" >

<fieldset>

<ul data-role = "listview" data-inset = "true" >

<li class = "my-list" data-role = "list-divider" >Bitterness Formula</li>

<li class = "my-list" >

<select name ="o_hop_equation" id ="o_hop_equation" data-theme ="b">

<option value = "0" >Tinseth</option>

<option value = "1" >Rager</option>

<option value = "2" >Garetz</option>

</select>

</ul>

</fieldset>

</form>

</div>

</div>



</body>

</html>

watusiware

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

I notice you include multiple pages in your document. This is not appropriate for MOST jQuery Mobile projects. It is OK if your site consists of only a handful of pages.

Do you attempt to load some additional pages that are not included in this document? That's not supported, would be a likely cause of this problem.

Pick one - put ALL of your pages in ONE document. Or put ONE page per document. (And make sure you duplicate <head> exactly on each one (except for title).

Other than that, iOS9 is in beta, and JQM 1.4.5 should not be expected to support it. If you think you've uncovered a problem with JQM and iOS9 you should report an issue on github, so that it can be fixed in a future release.

You'll have to make an example that the developers can try. It's not acceptable to just post some code as you have here, not is that particular effective here - make a demo with jsFiddle or Plunkr.

----

FYI, your CSS loading is wrong. Remove the first line. Load EITHER the complete CSS with structure and theme OR load structure and theme. As well, theme should come first. And you need to load icons. In this case, you got icons because you first loaded the complete CSS.

ThemeRoller shows you the files to load in correct order when you download your theme.

Wrong:

<link rel ="stylesheet" href ="jquery.mobile-1.4.5.min.css" />
<link rel ="stylesheet" href ="jquery.mobile.structure-1.4.5.min.css" />
<link rel ="stylesheet" href ="jquery.mobile.theme-1.4.5.min.css"/>

Right:

<link rel = "stylesheet" href = "jquery.mobile.theme-1.4.5.min.css" />

<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />

<link rel = "stylesheet" href = "jquery.mobile.structure-1.4.5.min.css" />

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

Thanks for the theme tips. I'll make those changes to the style sheet loading.

As an interesting experiment I bound a "click" handler to the Cancel button for the hopopts page and then attempted to manually go back using both $.mobile.back() and also windows.history.go(-1) but both failed. I also logged the window.history.length attribute which appears to be stuck at a length of 1, even though we are two pages into the heirarchy.

It appears that the root cause here is that (under IOS9) the windows.history is not getting updated as we navigate pages under JQuery. It always has a depth of one, so going back a page does not work properly. I also tried $.mobile.urlHistory.stack.length but it is undefined.

I'm using the stripped down example above so there is not much in the way of extra code being used.

Anyone know why the history is not updating for a simple three page depth under IOS9 (beta)?

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

The plot thickens - apparently Apple has added "security" features to IOS9 prevent a script from maliciously manipulating the history. This breaks window.history.go(-1); along with many other url history functions - and apparently these are used by JQuery mobile for navigating back more than one page.

http://stackoverflow.com/questions/6161701/is-history-api-broken-on-ios-location-bar-doesnt-update-on-pushstate?lq=1

Needless to say this is a mess - and will probably break a significant number of WebView and Cordova type apps, as something as simple as going back a page will no longer work.

I'm looking at solutions now - but it looks like the only reliable method is to track page changes manually with "window.onhashchange" and handle the back navigation manually as well, or else have button handlers that record the navigation history as we go.

What a pain! Thanks Apple....grrrrrrrrrrrr

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

The link you shared was 4 years old.

JΛ̊KE

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

OK,
Then tell me why a navigation to pages Home->Options->HopOpt (all with direct links) followed by a back command does not work:
- The window.history.length is only 1 deep at this point (it should be 3)
- window.history.go(-1) fails
- $.mobile.back() fails
- A button with "data-rel='back'" also does not move us back

All of the above work on IOS8.x but do not work at all on IOS9.

So why is the history bad, and why can't we move back from a simple linked page 3 deep in JQuery?

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

I don’t know.

I don’t know what is in your beerscript.js. I can’t recreate your site.

I’ve never had to call history.go or $.mobile.back. data-rel="back" just works for me.

Does it only fail when you embed it with PhoneGap? Is it a PhoneGap problem?

JΛ̊KE

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

OK,

I simplified the example again, removed my specific style code and external references, and tried it on a regular Safari browser. You can run it without errors on the desktop if you comment out the "cordova.js" line as annotated in the script.

The example runs fine in Safari desktop (buttons work) but if you run it under the IOS9 beta the Cancel button on the "hopopts" page still does not work properly. Also I am running the latest stable Cordova version. I've not yet tried posting the code to a server to try to run it from the IOS9 beta in a browser without Cordova.

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />

<title>BeerSmith2</title>



<script type ="text/javascript" charset ="utf-8" src ="cordova.js"></script>

<meta charset = 'utf-8' >

<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />

<link rel ="stylesheet" href ="jquery.mobile-1.4.5.min.css" />

<script src ="jquery-1.11.3.min.js"></script>

<script src ="jquery.mobile-1.4.5.min.js"></script>

<script type ="text/javascript">

</script>

</head>

<body>



<div data-role ="page" id ="home">

<div data-role= "header" data-position= "fixed" >

<h1>BeerSmith 2</h1>

</div>

<div data-role ="content" id ="home-content">

<ul data-role= "listview" data-inset= "true" >

<li><a href = "#options" >

<h3>Options</h3>

<p>Options and Settings</p>

</a></li>

</ul>

</div>

</div>





<div data-role ="page" id ="options">

<div data-role= "header" data-position= "fixed" >

<a href = "#home" data-icon = "back" >Home</a>

<h1>Options</h1>

</div>

<div data-role = "content" >

<ul data-role= "listview" data-inset= "true" >

<li><a href = "#hopopts" >

<h3>Bitterness</h3>

<p>Bitterness calculation settings</p></a></li>

</ul>

</div>

</div>





<div data-role ="page" id ="hopopts">

<div data-role= "header" data-position= "fixed" >

<a id ="hopopts-cancel" data-icon ="back" data-rel ="back" > Cancel </a>

<h1>Hop Options</h1>

<a href ="#options" id ="hopoptsok" class ="ui-btn-right" data-icon ="check" > Save </a>

</div>

<div data-role= "content" data-inset= "true" >

<form method = "POST" >

<fieldset>

<ul data-role = "listview" data-inset = "true" >

<li class = "my-list" data-role = "list-divider" >Bitterness Formula</li>

<li class = "my-list" >

<select name ="o_hop_equation" id ="o_hop_equation" data-theme ="b">

<option value = "0" >Tinseth</option>

<option value = "1" >Rager</option>

<option value = "2" >Garetz</option>

</select>

</ul>

</fieldset>

</form>

</div>

</div>



</body>

</html>

Not sure what to do next except start managing my own history options under IOS9. This is clearly broken, and no combination I can find (I've played with all of the cordova and jquery versions) seems to fix it.

I particularly find the fact that windows.history is broken disturbing since this is a javascript feature and not a feature of Cordova or jQuery. This indicates this is either an Apple IOS9 bug or Apple IOS9 security feature. In either case - its not good given they are releasing IOS9 in a few weeks.

I have a pretty large user base that is going to be ticked if IOS9 breaks their app.

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

http://home.jejaju.com/BeerSmith2.html (your HTML) works on my iPad running IOS9. What did I miss?

JΛ̊KE

jakecigar

Re: Re: Page Navigation Issues under IOS9 (beta)

5 years ago

BTW I’m running Ipad IOS9 build version 13A4325c.

JΛ̊KE

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

That is very odd, I'm running it on the simulator under XCode 7 beta 5, using an iPhone6 sim, and it does not run correctly as a Cordova app. The simulator version shows as IOS 9.0 (13A4325c) which is the same as yours.

However if I run the version from the Safari browser using your web site within the simulator it does run correctly, and the cancel button works.

So I guess it is possible that this is Cordova related or possibly some permission I'm missing? Not sure as I get no console errors on the sim even when I place a watch on the HTML console.

I'll continue to work it in the morning - possibly a Cordova issue, though it could also be something related to the new App Transport Security features. I'll research those and also peruse the Cordova forums.

Thanks for your help.

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

I would tend to agree. I don’t do Cordova apps, and I have not seen any problems.

Good luck, and please keep us updated!

JΛ̊KE

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

For anyone with this problem the baby is still ugly. Tracking window.history.length it looks like the history is somewhat randomly updating - sometimes it updates and sometimes it does not under Cordova. This makes the default data-rel="back" as well as window.history.back() navigations inconsistent.

My only solution so far has been to maintain my own history stack using the pageBeforeChange event and then override the click event where 'a[data-rel="back"]' to use my history to go back. Its a bit ugly but it does work.

I'm hoping Cordova can correct this issue under IOS before final launch, but I'm hedging using the method above.

watusiware

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

- Is there an Issue on jQuery Mobile github for this?

- Is there a bug report for this in Cordova's bug tracker?

- Have you found reports of this from others?

- Does the problem occur only running under Cordova?

Cordova serves files out of the local filesystem on the device. There are a number of things that browsers typically do differently when loading pages from a local filesystem. Cordova will typically have to provide some way to work-around.

I haven't followed Cordova closely, but I do know that they now have some support for WKWebView (on iOS8 or later). WKWebView is the same component used by Mobile Safari. Previous versions of Cordova used UIWebView. I don't know if there is some configuration you have to change to use WKWebView.

I usually let the beta issues sort themselves out, rather than fretting it. You can't expect iOS9 to be complete and bug-free, nor can you have any expectation that JQM 1.4.5 will work correctly with it. Once iOS9 is released, JQM will likely have a maintenance release to accommodate it. You can check GitHub issues to see what they are working on.

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

So I played with the sample (above) for quite a bit of time but found no good solution short of discarding Cordova. Given I have many thousands of existing users and IOS9 is coming out in under a week, that was not a good option. It appears to be something tied to Cordova and IOS9 and not jQuery itself.

So instead my only workable solution was to track my own history in my own code and implement my own navPage() and navBack() calls that would properly track the history. These use my own "history" queue stored locally.

I tied one handler to the page change notification in jQuery so it would update my local history queue. I also added a handler tied to the buttons with "data-rel='back'" which calls my own navBack().

The net result is the app runs properly again - but does not rely on window.history which seems to be unreliable/inconsistent under IOS9 and Cordova.

Finally I had to implement a check on the version of the OS since all of this code is not needed under IOS8 or earlier - so it only kicks in for IOS9.

That was my solution - hopefully we'll get a Cordova update soon that corrects this issue and maintains a consistent window.history in javascript.

Brad

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

Is beta 9.1 any better?

JΛ̊KE

watusiware

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

I've seen some indications that you can avoid this problem by using WKWebView instead of UIWebView. WKWebView is available from ios8 and higher, but is not the default in Cordova. You need to load a plugin.

WKWebView has the bonus of being quite a bit faster than UIWebView.

This might affect a current project of mine. But so far I've consciously avoided using back navigation. The project doesn't really have a need, as every page (so far, at least) has a specific "back" target (i.e. there is only ever one path to reach the page), so why not just use the URL directly?

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

The problem is the same under IOS9.1 (just tested it).

However someone on another forum sent me this very elegant solution - apparently IOS9 added a new hash function to the web addresses which messes up the history.

This fixes it - NOTE that it is important that this code go between the jquery.js and jquery.mobile-1.4.5.js when you are loading scripts near the top of your HTML file.

<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script> <script type="text/javascript">
  $(document).bind("mobileinit", function(){
      $.mobile.hashListeningEnabled = false;
  });
</script>  
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.js"></script>

Surprisingly adding this one change
    (disabling     $.mobile.hashListeningEnabled) between the two
    scripts fixes the     back button problem under IOS9 as well as
    IOS9.1
     
I have still noticed some minor timing
    differences between     IOS8 and IOS9 (related to when a button
    click is fired versus     the page changing events) but these are
    relatively minor issues     compared to the history being
    broken.
     
I think I owe this guy a beer!

jakecigar

Re: Re: Page Navigation Issues under IOS9 (beta)

5 years ago

I think you owe him a bottle of Scotch! Can you share the link to where you found it?

I think you should report it as a bug to the developers. This could happen to others.

Issues · jquery/jquery-mobile

JΛ̊KE

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

Here's the link where I posted the problem on StackOverflow and Mike M posted a solution:
http://stackoverflow.com/questions/32187431/problems-with-window-history-using-jquery-javascript-on-cordova-app-in-ios9/32531481#32531481

Brad

jakecigar

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

I clicked the up arrow for his answer. I think the JQM developers should chat with the cordova folks. And it all starts with bug reports (to both places)

JΛ̊KE

sachinkth..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

The solution worked for us as well, we have too many apps impacted by this, I too owe him bottle of wine :-)

Braden Sm..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

Hello all,

regarding the fix: $ . mobile . hashListeningEnabled = false ;

has anyone got windows.history.back(); working ?

the fix makes anchor tags in the html navigate back ok with " data-rel='back' ", but programmatic navigation in the js still fails...

thanks

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

Honestly I only did a quick check on my app with the hashListeningEnabled set to false, so I did not do a full check of the programmatic window.history.

The reason I did not fully test it is because I had already implemented my own history fix (outlined above), had fully tested that fix and had it submitted to Apple for review by the time I found the hashListeningEnabled fix.

With the IOS9 release date looming last week I decided to continue releasing my existing manual tracking of the history since the work was already done and fully tested under IOS9 beta and IOS9.1 beta. I fixed my app without using the hashListeningEnabled fix.

So I guess I would not be horribly surprised to find out that the window.history() is still messed up. Interestingly you can demonstrate, using Safari from your mobile browser with the script link example above - http://home.jejaju.com/BeerSmith2.html you can see that window.history() does work in Safari under IOS9 as long as you are not using it in a Cordova app.

So it still appears to be some kind of Cordova related interaction with the hashing in IOS9.

Brad

Braden Sm..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

ALL WORKING in ios7,8,9 (cordova 5.1.1, jqm 1.4.5, multi-page app)

$ . mobile . hashListeningEnabled = false ; fix at top of index.html

data-rel='back' on each back button <a> tag, for unconditional back paging

$.mobile.back(); for conditional back paging in js

watusiware

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

data-rel='back' on each back button <a> tag, for unconditional back paging

$.mobile.back(); for conditional back paging in js

What were you doing before?

Braden Sm..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

4 posts up...

watusiware

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

4 posts up...

You mean this?

has anyone got windows .history.back(); working ?

It's:

window .history.back()

Braden Sm..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

...which does NOT work under ios9/cordova/jqm...if your experience is otherwise, please tell us.

i came back to state what i did get working, without any significant code changes, to help others.

Brad Smit..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

More fun - it appears that 9.0.1 behaves differently than 9.0, because many of the fixes I put in place for 9.0 don't work under 9.0.1 as of its release yesterday. So 9.0.1 broke my apps.

However the $.mobile.hashListeningEnabled=false; fix along with using $.mobile.back() seems to work consistently across the platforms, and appears to work in 9.0.1 after some quick testing.

A bit upset also that 9.0.1 has no simulator or XCode support yet
  - Apple released it without a beta so there is no way to test it
  except on an actual device.

Steve Ung..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

var device = new Device(self.navigator.userAgent);

    if (!isAffectedDevice())
        return;

    $.mobile.pushStateEnabled = false;


    function isAffectedDevice() {
        return (device.browser === "Safari") && (device.version[0] === "9") && (device.os === "iOS");
    }

Fixed the problem for me.

Adrian Sc..

Re: Page Navigation Issues under IOS9 (beta)

5 years ago

We are getting a problem that seems to be the same, or very similar to this, with jQuery mobile 1.4.2.

Navigation works fine when using Safari on iOS9, but when pinning the app to the home screen navigation breaks down in inconsistent ways. When opening popups from a link, the popup will open and close quickly the first time. Clicking the link again will open it properly. Closing the popup with $(popupId).popup('close'); will sometimes take the user a step back in the history, to the page before the one from which the popup was opened.

The app's back-button uses data-rel="back", and works sporadically, sometimes giving the "locked" impression that someone mentioned above.

We are not using Cordova, as our app is a plain web app, but when pinned to the home screen it opens in WebView (not sure if UIWebView or WKWebView is used(?)).

This issue for Angular sounds like it might be relevant: https://github.com/angular/angular.js/issues/12241

There seems to be an issue with hash-changes not being set synchronously in UIWebView.

I've tried both the suggested solutions above, but turning off hashListening completely destroyed our navigation, and turning off pushState also created new errors.

If this is a problem only in UIWebView, does anyone know if it's possible to have a pinned app use WKWebView instead?

Top Reply

Response title

Attachments

Replies(37)

Statistics

Tags

Actions