Re: PhoneGap and JQuery Mobile Page Transition Flickering issue

[Mocksy]

Not sure if you have checked out the jquery mobile site, 

http://jquerymobile.com/test/docs/pages/page-transitions.html 

they mention a css fix which worked for me.

regards

mocksy.

On Tuesday, 26 June 2012 12:30:50 UTC+1, tarun wrote:

Having issue of flickering on Jquerymobile page transition in phonegap build, tried plenty of solution from https://github.com/jquery/jquery-mobile/issues/4024 but none of them work.

But issue is source page hide, white screen appears (1 second) and then smooth transition occur on destination page. Here white screen appearance for 1 second i.e. flickering is irritating.

IMPORTANT : Another thing i noticed, i am used AVD manager to run same app on my phone, it work like charm without flickering. But when i make phonegap build of that file, and upload and install apk on my android device. Flickering Appears.. It confuses me more. Don't know is issue with phonegap or jquery mobile?

Let me know if there any solution for it....

Regards,

Tarun

[tarun]

Thanks Mocksy for suggestion, but i already tried it. It doesn't solve the problem. Problem is on transition, that for millisecond/second a white screen appear, which is pretty visible during transitions. Also tried setting defaultPageTransition to none but that also didn't work. Still problem persist.

For example :

When i click on link it changes page, before change page, it hide current page after that white screen appear and then transition is made to next page. White screen part is problem. Unable to replicate this problem on web browser or Testing through AVD Manager on emulator or Device. But issue occur when making phonegap build and testing through the build.

Also this CSS fix, broke plenty of things on android. After applying this fix, it doesn't solve the problem plus Testing on S2 ICS 4.0, some time click doesn't work. It also effecting NavBar in bottom of app.

Thanks,

Tarun

[Kerri Shotts]

Are you navigating to a new html page or are you staying within the same html page but navigating to a new element? If the former, there's no way to avoid the flicker -- you're unloading the DOM and loading a new one in. If the latter, you should definitely be able to avoid it. One thing I noticed was that if you were using -webkit-transform:translate3d() to animate an item in Android is that it is important to have that CSS element applied on the element from the very beginning. (using 0,0,0 as coords.) When applied just prior to an animation, I would get a flicker as the DOM applied the transform to the element initially. But it wasn't a white flicker, though, so I don't know if that is going to help.

Also -- what's the background color of your pages? Is it possible that the animation is somehow hiding your first view too quickly, thus revealing the background?

[Simon MacDonald]

This issue is specifically addressed in jQuery Mobile 1.1.1 RC1.

http://jquerymobile.com/blog/2012/06/28/announcing-jquery-mobile-1-1-1-rc1/#features
https://github.com/jquery/jquery-mobile/commit/f164821cd7fa64ea582728f524a927a621402507

Simon Mac Donald
http://hi.im/simonmacdonald

> --
> -- You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com
>
> To compile in the cloud, check out build.phonegap.com
>
>

[tosha@nic]

I had similar issue and solved it here is code and demo for it

http://tosha9.blogspot.com/p/phone-gap.html

Hope that helps

[Randy Tanudjaja]

hi simon, this issue still working on JqueryMobile 1.2.0, i couldn't get any 100% solution for this. and still there are some flicker for the transition. This flicker is about 1/10 second, but still annoying. 

[Randy Tanudjaja]

and rahul, thanks for your reply. i have tried change the hardwareAcceleration=false but it get worse. the page render is worse than before. 

On Wednesday, 12 December 2012 14:06:36 UTC+7, Rahul wrote:

the problem is 
by default for the phonegap build hardwareAcceleration is true that cause flicker
in you ecllipse try to add android:hardwareAcceleration=true in your application tag
if set to false it will work smooth transition but it will degarde the quality of scrolling

[Simon MacDonald]

I know people like using jQuery and by extension jQuery Mobile but I can't recommend it for Android development. Before I got sick I started working on reasons with data why I don't think it is a good idea that I hope to get up in the next couple of weeks.

http://friendsdontletfriendsjqm.tumblr.com/

Simon Mac Donald
http://hi.im/simonmacdonald

[vikramsareen]

simon, 

what do you suggest then if not use jqeury mobile.... is sencha good? or anything else you recommend.

i am facing the same problem for pages having flickering while transition.... 

thanks a ton in advance. 

[WebSteve]

How about if you go from a plain HTML page to a plain HTML page that has no JS? You might decide that you like the speed. I don't mind the lack of sliding transitions, and my customers don't seem to mind either. So I use iWebkit, which uses no JS and has a nice iOS GUI.

Regards,
Steve

[Chris Haley]

Simon, I'm curious about this.  I'm currently using jQuery and jQuery Mobile in a PhoneGap project.  It's so nice to have what users seem to now expect in terms of formatted elements and UI interaction be interjected automatically by simply including a couple lines in the <head> tag!  I do recognize that it comes with some bugs here and there but I'm not sure it warrants jumping ship completely.  If there is a recommendation for UI interaction and formatting on a similar scale (other than simply, "create your own"), I'd be all ears.

> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com
>
> To compile in the cloud, check out build.phonegap.com
>
>
--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com
 
 

hi simon, this issue still working on JqueryMobile 1.2.0, i couldn't get any 100% solution for this. and still there are some flicker for the transition. This flicker is about 1/10 second, but still annoying. 

> To post to this group, send email to phon...@googlegroups.com

[Chris Haley]

Are you telling everyone that the solution to flickering upon page transition is to turn off page transitions?

On Wednesday, February 20, 2013 1:07:58 PM UTC-5, Yuvraj Deshmukh wrote:

Hi Tarun,

Here, I come with the solution........

Please follow the sequesnce

// First of all jQuery

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

// then load custom jQuery Mobile

<script type="text/javascript" src="mobile/js/mobile-jqm.js"></script>

// then load jQuery Mobile

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

// finally load your own scripts (.js) files 

<script type="text/javascript" src="mobile/js/script.js"></script>

To disable transitions, create mobile-jqm.js filt & inside of the mobile-jqm.js file, place this code:

$(document).bind("mobileinit", function(){

  $.extend(  $.mobile , {

   defaultPageTransition: 'none'

  });

});

[Amrit Kahlon]

It may not seem like the best answer, but thats actually what I ended up doing. I was looking for a away to fix the jQuery mobile transitions for a while on android. The issue is jQuery animations themselves have terrible performance on android, yet work smooth on iOS. I ended up simply disabling all transitions in my app and it actually feels much snappier than the iOS one. The obvious issue being you don't have transitions. 

CSS3 transitions however look beautiful on android. If you can find a framework that uses CSS3 instead of jQuery for transitions, it should work properly. I actually messed around with a few, I found JQMobi had really good transitions, but has other issues.

I heard some people were using zepto, and they had good transitions. But I haven't tried it myself.

[Chris Haley]

The problem is jQuery Mobile, itself.  Unfortunately, since it has so much good stuff that everyone accepts and suffers the bad stuff.  It's a bloated and bug-ridden.  That said, I used it in my last project and the transitions are fine in Android.  I've been trying out jQTouch (both jQuery and Zepto come packaged as choices -- Zepto is most a slimmed down jQuery, same syntax and all) and find it working nicely.  The down-side is that it's not nearly as popular nor documented (much at all), so it's harder to find help but it seems to work nicely.

--

-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com

---

You received this message because you are subscribed to the Google Groups "phonegap" group.

To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Honestly, I must say, of all the people I've ever met, you're most definitely one of them.