Sometimes inactive back button in jQueryMobile PhoneGap app

Question

I created an application using jQuery Mobile (1.3.1) and PhoneGap (3.4), and persuaded him to have a pretty "flat" interface:

I have problems where, only on iOS, and only occasionally the back button on only one screen becomes unresponsive. The same HTML and CSS for the back button on other screens seems great, this is just this one screen. Here it is in chrome with a button selected in devtools to highlight its hit area:

And just for good measure, here is the headline:

The code for this screen title is the same for the entire screen in the application:

<div data-role="header" data-theme="e" data-position="fixed" data-tap-toggle="false"> <h1>Event Detail</h1> <a data-rel="back">Back</a> </div> 

We found that if the user got stuck on this screen and forcefully closed the application, the button seems to work as expected the next time it is used.

So my current theory is that the header somehow interferes with the back button (sometimes). However, the fact that it does not always make me really not believe in this theory, however.

The button has a z-index of 10, and the z-index of the header remains the default (which is 1, right?). Therefore, even if it looked like a headline, I understand that the z-index of 10 should put the button “on top” and give it the first opportunity to receive the click / tap event.

The application uses jQueryMobile 1.3.1 because of the time when and how it was created, and updating at the moment is not a reasonable option. (A significant number of violations occurred in version 1.4.x)

I debugged the application on both iOS and Android, and there were no JavaScript errors. I have a complete loss of what to do. This application is being deployed to thousands of users, and there is a high probability that many, perhaps most, will encounter this error. I would rather not explain (with my tail between my legs) that forced closure is the only way to fix this ... but this is what I have done so far.

Does anyone have any tips or ideas on how to fix this?

---

Update 1:

I noticed that when I debug the application remotely in Safari via USB, I can watch how the classes on the back button change, when pressed, from ui-btn-up-e to ui-btn-hover-e brief on ui-btn-down-e and back to ui-btn-up-e - and yet the application does not return !: (

And as requested, here is the CSS applied to the header, the H1 button, and the back button: (only the “calculated” end values, not all intermediate overridden values)

header div:

 -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; background-attachment: scroll; background-clip: border-box; background-color: rgb(179, 27, 27); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(179, 27, 27); border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(179, 27, 27); border-left-style: solid; border-left-width: 0px; border-right-color: rgb(179, 27, 27); border-right-style: solid; border-right-width: 0px; border-top-color: rgb(179, 27, 27); border-top-style: solid; border-top-width: 1px; color: rgb(255, 255, 255); display: block; font-family: MyriadPro, Helvetica, sans-serif; font-weight: bold; height: 45px; left: 0px; padding-top: 1px; position: fixed; right: 0px; text-shadow: rgb(85, 85, 85) 0px 1px 0px; top: -1px; width: 320px; z-index: 1000; zoom: 1; 

H1:

 color: rgb(255, 255, 255); display: block; font-family: MyriadPro, Helvetica, sans-serif; font-size: 18px; font-weight: bold; height: 23px; margin-bottom: 10px; margin-left: 48px; margin-right: 48px; margin-top: 12px; min-height: 19.799999237060547px; outline-color: rgb(255, 255, 255); outline-style: none; outline-width: 0px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center; text-overflow: ellipsis; text-shadow: rgb(85, 85, 85) 0px 1px 0px; white-space: nowrap; width: 224px; zoom: 1; 

Back Button:

 -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(179, 27, 27); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(179, 27, 27); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 0px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(179, 27, 27); border-left-style: solid; border-left-width: 0px; border-right-color: rgb(179, 27, 27); border-right-style: solid; border-right-width: 0px; border-top-color: rgb(179, 27, 27); border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid; border-top-width: 0px; box-shadow: none; color: rgb(255, 255, 255); cursor: pointer; display: block; font-family: MyriadPro, Helvetica, sans-serif; font-weight: bold; height: 31px; left: 5px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: absolute; text-align: center; text-decoration: none solid rgb(255, 255, 255); text-shadow: rgb(0, 0, 0) 0px 1px 0px; top: 15px; vertical-align: middle; width: 60px; z-index: 10; zoom: 1; 

Answer 1

First let me tell you that your problem probably has nothing to do with the CSS button / header. If this error occurs sporadically, and only during the feedback function, your problem is probably due to the functionality of the data-rel = "back" .

Unlike the classic href page movement, data-rel = "back" uses a JavaScript navigation history that may or may not work depending on your application content. Since jQuery Mobile uses AJAX to process pages (and from your button I can see that you are using this method), it also has its own way of handling navigation history.

Now let's say your application makes heavy use of dynamic content creation (including deleting content), and, for example, the previous page is deleted from the DOM, in which case data-rel = "back" will not work. If the previous page does not exist, you cannot go back. There are several other factors that may also affect this functionality.

What you can do to solve this problem:

• Give this button a class name or even an identifier. After that, associate the click event with it (vclick is even better, because it works as fast as a tap, without a delay of 300 ms and works on desktop and mobile browsers) and add console output every time you click on this button. So you would do it like this:

   $(document).on('vclick', '#button-ID-goes-here', function(){ console.log('Problematic button'); }); 

  This way you can check if the button is pressed.

• The next thing is a bit complicated. You never posted your HTML page code, but looked at the image of your page. I think that you are using the right jQuery Mobile paradigm, basically you are using div containers data-role = "page < as page containers. You would be surprised how many jQuery Mobile developers don't know / don't understand what they need / need to have this if they want to have a suitable jQuery mobile app.

  Take a look at the page containing this button in the header. Bind the pagebeforeshow event to this page and the monitor will fire, and if it fires , you can use it to display the previous and next page.

  Working example: http://jsfiddle.net/Gajotres/vds2U/72/

   $(document).on('pagebeforeshow', '.ui-page',function (e, data) { alert("Previous page : " + data.prevPage.attr('id') + " - Next page: " + $.mobile.activePage.attr('id')); }); 

  Use this solution to verify the correctness of the next page and even its existence. If this page event does not fire when you click the back button, something bad is happening.

• Use the following code as a workaround. Mainly use page events and remember your previous page. Since you are using the back button, this solution will be viable. We will use the pagebeforeshow event to find out our previous page, we will save it in some JavaScript object (it will be stored between page transitions).

  Working example: http://jsfiddle.net/Gajotres/vds2U/73/

   $(document).on('pagebeforeshow', '#second',function (e, data) { pageHandler.prevPage = data.prevPage.attr('id'); $(document).on('click', '#custom-back-button',function () { $.mobile.changePage( "#"+pageHandler.prevPage); }); }); var pageHandler = { prevPage : null } 

  This is a complete customizable solution for processing the data-rel = "back" page.