cheeming/making-jquery-mobile-page-transitions-work-well-with-android-4.1.md

## making-jquery-mobile-page-transitions-work-well-with-android-4.1.md

      
    Raw
  

              making-jquery-mobile-page-transitions-work-well-with-android-4.1.md
            
          
We are using:

Cordova v4.3.0
jQuery Mobile v1.4.5


We would like page transitions to be animated nicely


Android 4.1 doesn't play ball


We use the standard jQuery Mobile pages with fixed header, and we've disabled tap toggle


We find that we get 2 problems

White flashes, flickering, in between the page transitions
Also the content of the page gets pushed underneath the fixed header, when we remove previously inserted pages (we do this to deal with memory / performance issues)
And user is able to tap hold and prompt up the user selection options / widgets, i.e. copy and paste


But we've found a way to fix these issues


Read on :)


Fix white flashes / flickering: Your header tag should look like this:
<div data-role="header" data-tap-toggle="false" data-position="fixed" data-disable-page-zoom="false">

The data-disable-page-zoom helps to fix the white flashes / flickering issue


Fix partially hidden page: We need to add the following CSS:
div[data-role="page"] {
  padding-top: 42px !important;
}

During the page transition, jQuery Mobile will add this padding, but when we remove the previous page DOM element dynamically (for performance reasons), the top padding setting is unset (we have no idea why), which causes the page to move upwards
To fix it we specify the top padding in CSS, and we use the !important so that it overrides other settings, which is required for Android 4.1


Disable the tap hold: You can put this for your header, in fact, you should use it for your other elements that your user is likely to interact with
div[data-role="header"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}