jQuery Mobile flashing page transitions

jQuery mobile page transition bug

Posted on October 19, 2013

Tags:

jQuery

I’ve developed a few mobile apps for iOS using jQuery Mobile and Phonegap and always seem to come across the same flickering page transition problems. Searching google throws this up as a common problem for a lot of developers. The majority of apps I build are for a specific devices whether it be iPhone or iPad, because of this I’ve found a simple fix to ensure smooth, bug free page transitions. It’s just a case of removing any margins from your body tag, fix the height and width of the page container and apply overflow hidden to the page – Here’s the code:

.ui-page {
   webkit-backface-visibility:hidden;
   overflow:hidden;
   height:768px !important;
   width:1024px !important;
}

Don’t forget to change the height and width attributes to suit your device and bear in mind that this fix will only work if you’re developing for a specific device and orientation as you’re setting the page size to the device resolution. – See more at: http://www.marclloyd.co.uk/uncategorized/jquery-mobile-flashing-page-transitions/#sthash.XorTwEVT.dpuf