Response title
This is preview!
Move this topic
jQm RC1.1 flicker after transition full screen mode.
in jQuery Mobile
•
1 year ago
Hi guys,
Is anyone else experiencing a white flash after page transition on iPhone 4 iOS 5 with jQm RC1.1?
Using the following meta tags
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
NOTE : Only when app launched from home screen - fine in safari browser.
Regards
M
1
Replies(15)
Yes, I have the same problems, a lot of flickering and other issues. The footer doesn't flash at the top as in earlier versions but has new issues too. see my post:
Leave a comment on joquery2's reply
Made an account to reply to this.
I was experiencing the same thing; amplified by the new 1.1.0 release: Animations were fine normally, but once saved as a web app and run in full screen, flickers and screen flashes were very apparent. Again - when run in safari there seemed no issue.
I first toyed with the view port. Removing the device-width call fixed the issue, but messed up the sites display and bounds. It did tell me though it it seems a similar issue to full-screen animations in css3. Attempted -webkit-backface-visibility, -webkit-perspective changes and translate3D on elements, wrappers, everything ... nothing worked.
I then dug in the the JQMobile code. Using the dev version, line 2241 begins the 'startIn' function; used to move the target page in to view. This seemed to be the most problematic. Removing items systematically led me to the page size functions (height and scroll position). Rearranging the first four items there seemed to actually fix/workaround the matter for me; and as of yet has reveled any negative side effects.
Originally:
- $to.addClass( $.mobile.activePageClass );
- // Send focus to page as it is now display: block
- $.mobile.focusPage( $to );
- // Set to page height
- $to.height( screenHeight + toScroll );
- scrollPage();
Now:
- // Set to page height
- $to.height( screenHeight + toScroll );
- scrollPage();
- $to.addClass( $.mobile.activePageClass );
- // Send focus to page as it is now display: block
- $.mobile.focusPage( $to );
I can only assume the prepping the page before animations are applied (via height and scroll) allows the animation to properly know where its starting point is.
Let me know if this pans out for you. So far its seemed to check out on iOS5 iPhone and iPad.
Leave a comment on kcmcgrath's reply
Thanks for digging into this. I had white flickering on FF, too. All gone thanks to your fix. Maybe post to Github, so the JQM dev's can have a look?
Leave a comment on frequent's reply
Thank you very much!
Fix works for me!
Most of the time the problem occured to me when navigating away from listview pages. (only in fullscreen safari)
Demo is today, found your workaround last night!
Just tested on ipad1/2 and iphone
have a nice day!
Fix works for me!
Most of the time the problem occured to me when navigating away from listview pages. (only in fullscreen safari)
Demo is today, found your workaround last night!
Just tested on ipad1/2 and iphone
have a nice day!
Leave a comment on tempelt's reply
I'm also experiencing massive problems with the transitions. I'm using Phonegap to make a app for iPhone.
The transition I'm using is 'slide'. I have a fixed header and a fixed footer with a nav bar. The 'slide' transition works fine when I haven't scrolled. But when I scroll (like half way) and then I change the page, the transition is far from smooth. The header bar drops till like 30% of the screen.
Please see this video I made: http://www.youtube.com/watch?v=IXPWUOEKZ-4
Just for the record; the fix above doesn't work for me. It makes it even worse.
The transition I'm using is 'slide'. I have a fixed header and a fixed footer with a nav bar. The 'slide' transition works fine when I haven't scrolled. But when I scroll (like half way) and then I change the page, the transition is far from smooth. The header bar drops till like 30% of the screen.
Please see this video I made: http://www.youtube.com/watch?v=IXPWUOEKZ-4
Just for the record; the fix above doesn't work for me. It makes it even worse.
Leave a comment on jesperveldhuizen's reply
the transition being less then smooth if scrolled down is a known limitation of the slide transition i cant seem to find the thread now but when it is discussed by todd parker he is specific this really only works well for pages that are not very long because it has to scroll to the top before the transition. to avoid this they have the slidefade transition that fades out in the middle to hide the scroll.
Leave a comment on arschmitz's reply
@arschmitz, do you know if iScroll would effectively keep the height of the page to the size of the viewport (since the list will be scrollable and a set height as perceived by JQM)? It seems like that might make the transitions smoother even with long lists. I guess returning to the last scroll position wouldn't work anymore though, unless iScroll has a mechanism for that.
Leave a comment on dcarrith's reply
i don't really use iscroll because i have to support to many platforms but i can say the reason for the scroll is to preserve scroll position.
iv seen one person overcome this using silentScroll(0); but havent tried my self but this WILL lose scroll position.
maybe @zsprawl or @watusiware could jump in on iscroll they i know both use it
Leave a comment on arschmitz's reply
Oh, is iScroll only for iOS? If so, I guess that would kind of defeat the purpose of using JQM in the first place. I was hoping it was named iScroll because it could make your app scroll as smooth as it would on iOS. :(
Leave a comment on dcarrith's reply
PROJECT INFO
Last code update: 2011.07.03 – v4.1.7
Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.
From iscroll website. but this still leaves off kindle fire / blackberry / nook /palm / windows 7 phone and many many more
Leave a comment on arschmitz's reply
Leave a comment on nihato's reply
There is an open bug ticket on this on github now and they are trying to find the problem. it only seems to effect iOS fullscreen mode it seems like the rendering is not as good in fullscreen mode as it is in safari it espically effects position:fixed elements like the header and footer. its starting to look like an ios bug not jqm but im keeping my fingers crossed for a solution
Leave a comment on arschmitz's reply
There is a solution. Look at kcmcgrath's posting :)
Leave a comment on nihato's reply
It might also be worth while to try out Scott's latest commit for this issue:
https://github.com/jquery/jquery-mobile/issues/4024
Leave a comment on dcarrith's reply
I have same problem on windows phone 7. Please tell me fix for this problem. I tried number of approaches but nothing work for me.
Leave a comment on amar_jit's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to MrMag00's question
{"z7404371":[14737000003259647],"z10042560":[14737000003279171,14737000003281729],"z7947755":[14737000003264037,14737000003264055,14737000003279805],"z21248357":[14737000003585423],"z5049151":[14737000003261069],"z8696387":[14737000003263063,14737000003263079,14737000003263115,14737000003280111],"z18713361":[14737000003255535],"z8700829":[14737000003095315],"z18835031":[14737000003264019],"z8676209":[14737000003094370]}
Statistics
- 15 Replies
- 11994 Views
- 7 Followers
