0

I have read 10+ questions concerning this issue, yet no one solved it for me..

I have uploaded the app in a github publich repository, and there is the phone gap build link. I'm testing on PC-Browser (chrome) using "Ripple" simulator, it's working fine. But when I test on my phone (Samsung Note 3), it gives weird transitions other than slide!! as much as I can tell, it fades then slides, which gives a horrible transition effect. =(... Please Advice..

[UPDATE] Feel free to edit the repo (if possible)

Roshdy
  • 1,323
  • 3
  • 20
  • 31
  • the fade is a hidden `scrollTop` from JQM done before sliding/fading/foo-ing to the next page. You need to scroll to the top because pages in JQM are just `` being moved around so ... like in a book ... they should be aligned at the top (and left) to keep everything readable. This behavior was introduced in JQM 1.1./1.2 (if I remember correctly). Before it was just a visible scrollTop. Other than that, if your transitions on Android look terrible, point your finger at Android (and read up [here](http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/)) – frequent Dec 15 '13 at 14:06
  • Then how am i suppose to prevent this scrollTop issue? – Roshdy Dec 15 '13 at 15:04
  • I think you can't. JQM wouldn't do it if it wasn't necessary, so I guess I would not tamper with it. If you want to hack around, try [disabling scroll](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) and find the class JQM uses to whiten the screen and overwrite its CSS. But trust me, I have not seen nice transitions on Android, so for me this would be waste of time. – frequent Dec 15 '13 at 15:16
  • So what am i suppose to do now? give up the app =D? I can't deliver it this way! I'm sure there is a nice way for such issue to be handled, how else all the apps made by PhoneGap on Android are made? – Roshdy Dec 15 '13 at 23:17

1 Answers1

0

I couldn't find any suitable solution for this issue but I have something like a hack to overcome it

  • upgrade your jQuery mobile to JQUERY MOBILE 1.4.0 RC1 or anything above, this will make your animations faster and smoother.

  • add those lines to your css main file:

    /** To fix white flash between transitions**/
.ui-overlay-a {
  background-image: url(../img/bg.png) !important;
  background-repeat: repeat !important;
  background-color: #182633 !important;
}

.ui-page { 
  -webkit-backface-visibility: hidden; 
}

  • update ".ui-overlay-a" css with corrosponding backgorund color and image.

Hazem Hagrass
  • 8,566
  • 8
  • 29
  • 49
  • 1
    well, it's much better than 1.3 that's for sure, yet, if you may download the app from the link i provided in build.phonegap and bare with me, you'll find a blue screen that appears for data-rel="back" transitions, and for data-direction="reverse" + reverse direction is messed up, and the flashing is still happening, but it doesn't flicker anymore – Roshdy Dec 16 '13 at 08:37
  • I downloaded your code, this blue background generated from my css above, again this is a not a solution, this is a hack to hide bad things like white background from user, so you have to update the css under ".ui-overlay-a" with the suitable background and color – Hazem Hagrass Dec 16 '13 at 08:51
  • You need to fix line 21 also in index.html – Hazem Hagrass Dec 16 '13 at 08:51
  • do you think it's related to me not making android-manifest file and set the hardwareAccelerated to false? – Roshdy Dec 16 '13 at 09:06
  • I'm not sure, but I tried all of this before and got your result :( – Hazem Hagrass Dec 16 '13 at 09:08