Response title
This is preview!
Move this topic
Transition flashing && showing white "page" between pages
in jQuery Mobile
•
9 years ago
Hi
I've upgraded to JQM 1.1RC1 and transition stopped working correctly.
I'm testing it on iPhone (ios 5) and android 2.3.
When I do a page transition (slide) there is a white space sliding along before the page I changed to appears
In addition, the header flickers after the transition has finished.
Does anyone know how to fix this?
1
Replies(20)
I have exactly the same problem. I can see the same issues on the jquerymobile demos page as well, so it's not a local issue. Looking forward to having the new "turn" effect working smoothly!
Leave a comment on adrianbj's reply
This is not an issue its the way the new 1.1rc works. Per the blog accompanying the release
The default page transition is now be a super fast and smooth fade out/in animation. All the 1.1 page transitions (slide, flip, etc.) have been tweaked to have a place in the animation where we fade out to accomodate the scroll jump, but we think this looks pretty sharp and always in control.
I seriously doubt that this is the way it is intended to be. It is the opposite of sharp and always in control.
Leave a comment on arschmitz's reply
Well then, it looks really bad.
The page goes out followed by a white page, followed by the page I want to display.
If that's not enough, the header flickers like hell for a bout a second.
I will probably have to revert to 1.0.1 :(
Leave a comment on ytzhakov's reply
I cant say i completely disagree with you but remember this is just a release candidate not a final release. I'm sure they will be watching the forms and taking user input into account. There are a lot of threads about this already. While i can see why they have done this (to prevent scroll jump during transitions you can find a LOT of threads complaining about this problem in 1.01) Personally i'm just hoping to add an option to remove the fade in between transitions.
Agreed.
Removing the fade without hacking in to the JQM code will be a very welcomed option.
Leave a comment on arschmitz's reply
Hi all -
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Turns out there was a an issue in 1.1.0 RC1 that faded a page to full white between transitions instead of just fading to the bg color of the page so if you had a dark or colorful background, things looked pretty "flashy". I created a test page and blocker issue yesterday and we already checked in a fix.
Issue:
Test page:
If you grab the css and js from that jsbin and give it a try in your apps, does it make things look better? Let us know.
Thanks,
Todd
Todd
..............................................
Todd Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.
todd@filamentgroup.com
Hi Todd,
Thanks for your reply.
I've tested the js & css from jsbin and here are the results:
Now the slide animation slides to a white page, then after a few milliseconds the new page fades in.
That fixed the flickering problem but it doesn't feel native at all.
I'd really like to have the old transition back where there was no white page at all.
Alternatively, maybe you can fade both pages to 50%, removing the white page in between, then fading the new page back to 100%.
The white page really takes away the "native" feel of the app.
When I showed it to my colleagues they thought it was broken somehow.
Thanks.
Leave a comment on toddparker's reply
There is a solution that's not perfect but i think is a bit of an improvement over the current effect.
in 1.1rc docs under transitions it gives the option to define custom transitions so going to 1.01 and getting the original slide transition from the css i defined my own css transition oldSlide (below) then i just set the default transition to oldSlide the only thing i changed in the below css is to change the class names from slide to oldSlide to avoid conflict. The only issue with this is it slides out then in. where 1.01 did the in and out animations at the same time
During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above. As of jQuery Mobile version 1.1, animation class additions are queued, rather than simultaneous, producing an out-then-in sequence, which is friendlier for mobile rendering than our previous simultaneous transition sequence.
- .oldSlide.out {
- -webkit-transform: translateX(-100%);
- -webkit-animation-name: oldSlideouttoleft;
- }
- .oldSlide.in {
- -webkit-transform: translateX(0);
- -webkit-animation-name: oldSlideinfromright;
- }
- .oldSlide.out.reverse {
- -webkit-transform: translateX(100%);
- -webkit-animation-name: oldSlideouttoright;
- }
- .oldSlide.in.reverse {
- -webkit-transform: translateX(0);
- -webkit-animation-name: oldSlideinfromleft;
- }
- .oldSlideup.out {
- -webkit-animation-name: dontmove;
- z-index: 0;
- }
- .oldSlideup.in {
- -webkit-transform: translateY(0);
- -webkit-animation-name: oldSlideinfrombottom;
- z-index: 10;
- }
- .oldSlideup.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
- }
- .oldSlideup.out.reverse {
- -webkit-transform: translateY(100%);
- z-index: 10;
- -webkit-animation-name: oldSlideouttobottom;
- }
- .oldSlidedown.out {
- -webkit-animation-name: dontmove;
- z-index: 0;
- }
- .oldSlidedown.in {
- -webkit-transform: translateY(0);
- -webkit-animation-name: oldSlideinfromtop;
- z-index: 10;
- }
- .oldSlidedown.in.reverse {
- z-index: 0;
- -webkit-animation-name: dontmove;
- }
- .oldSlidedown.out.reverse {
- -webkit-transform: translateY(-100%);
- z-index: 10;
- -webkit-animation-name: oldSlideouttotop;
- }
- @-webkit-keyframes oldSlideinfromright {
- from { -webkit-transform: translateX(100%); }
- to { -webkit-transform: translateX(0); }
- }
- @-webkit-keyframes oldSlideinfromleft {
- from { -webkit-transform: translateX(-100%); }
- to { -webkit-transform: translateX(0); }
- }
- @-webkit-keyframes oldSlideouttoleft {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(-100%); }
- }
- @-webkit-keyframes oldSlideouttoright {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(100%); }
- }
- @-webkit-keyframes oldSlideinfromtop {
- from { -webkit-transform: translateY(-100%); }
- to { -webkit-transform: translateY(0); }
- }
- @-webkit-keyframes oldSlideinfrombottom {
- from { -webkit-transform: translateY(100%); }
- to { -webkit-transform: translateY(0); }
- }
- @-webkit-keyframes oldSlideouttobottom {
- from { -webkit-transform: translateY(0); }
- to { -webkit-transform: translateY(100%); }
- }
- @-webkit-keyframes oldSlideouttotop {
- from { -webkit-transform: translateY(0); }
- to { -webkit-transform: translateY(-100%); }
- }
Leave a comment on arschmitz's reply
Hi Todd,
You posted your response while i was posting mine! This gives a cleaner appearance for sure. I think this really only addresses half of what peoples complaints are about the new transitions (and my own). The other half is the fade in for the second half of the animation. It takes away from the "native" feel of the app. That being said i completely understand based on the docs and blog why this decision was made.
Personally i feel the css based solution i posted above (just an exerpt from 1.01) might be a better compromise? it maintains the slide for both phases of the animation to give a more native feel but leaves in the "blank" in between to allow for the less jumpy animation and the fix for the scroll issues.
Leave a comment on arschmitz's reply
I have tried the jqm versions posted in the test pages above (http://jsbin.com/avukid/3 & http://jsbin.com/avukid/3/edit). Additionally I am using jquery-1.7.1.min.js and phonegap-1.4.1.js. I am testing on a Droid X running 2.3.3.
Perhaps it is because this is an older device, but I am still experiencing a good deal of "flashing," poor responsiveness to touch and I am seeing a white screen between almost all transitions. The only transition occurring is, of course, fade, but that barely makes an appearance.
(Not posting this as a complaint, just as feedback! I love JQM and truly appreciate the hard work that has gone into it!)
Leave a comment on flyingace's reply
I can confirm that the white page problem continues with the test page js and css. The flickering has disappeared in ios 5
Leave a comment on ytzhakov's reply
The issue still persists inspite of trying out the new js/css.
However it only happens while the forward transition is applied.
Also I have a multi-page app (pages split over multiple files) and when the forward transition happens then this issue occurs. Any workarounds to prevent this would be highly appreciated.
Update :
Commenting out the below code :
- $.mobile.focusPage( $to );
In function outInTransitionHandler(
resolves the issue around the flicker.
Leave a comment on baradas's reply
This removes the entire "fade" effect? That would be nice because I really dislike it...
---
http://zsprawl.com
---
http://zsprawl.com
Leave a comment on zSprawl's reply
no the fade is a part of all transitions now. However if you use the css i posted above this WILL remove the fade effect however there will still be a "blank" in between because in and out animations are now placed in a queue rather then being executed at the same time. Basicly the current page will slide out then the new page will slide in instead of them doing both at the same time.
Leave a comment on arschmitz's reply
Hello,
I'm new to Jquery Mobile, making my first mobile pages right now and am extremely thankful for the Jquery mobile project.
I would say i was playing around with the transitions and the white page coming up in testing with Chrome / ipad / ipod was driving me nuts. I switched to 1.0.1 and it went away. Please do not put that change in the next version!
Leave a comment on wdkissinger's reply
I have the same issue . I am developing applicatin for windows phone 7. Can anybody tell me what is the right way to remove white page between pages. I tried many things. but none is working properly.
Leave a comment on amar_jit's reply
you'll have to adjust jquery.mobile.1.1.0.js
move line 2243: $to.addClass( $.mobile.activePageClass );
down to after line 2257: $to.addClass( name + " in" + reverseClass );
This is a fix though and hasn't been tested, but it seems to work for me
Leave a comment on muthukumar28041990's reply
Sorry But this is not working on windows phone 7 emulator. Can there be any solution for this problem for windows phone. .
Can we make that white screen to black by doing any css or using jquery or javascript. Please tell me solution.
I tried many approaches but nothing will work for me.
Leave a comment on amar_jit's reply
Hey guys,
Not sure if this will help at all. I was having a similar problem developing a website. I wanted the pages to fade in when the page loaded, so I used the following code...please excuse the ids...Anyhow, when I used this, the whole page would blink white before fading in...drove me crazy. I ended up placing my background image on both the body tag and my .wrapper class. Then I changed my code.
This code blinked:
- $("body").css("display", "none");
- $("body").fadeIn(1500);
- $(".wrapper").css("display", "none");
- $(".wrapper").fadeIn(1500);
I'm new to all of this, so most likely, all of you already figured out that this wouldn't work for some reason, but I thought I'd share it anyway, because my solution worked for me.
Cheers
Leave a comment on danielc.hopkins's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to ytzhakov's problem
{"z26229671":[14737000004401137],"z8405442":[14737000003104084,14737000003104147,14737000003104155,14737000003104201,14737000003123007],"z8696387":[14737000003103305,14737000003103329,14737000003103389,14737000003103409,14737000003128033],"z8744100":[14737000003123191],"z21227221":[14737000003581743],"z8745214":[14737000003103239],"z600308":[14737000003103369],"z8799925":[14737000003136193],"z8758373":[14737000003121023],"z1976781":[14737000003124133],"z21248357":[14737000003582755,14737000003582931],"z21761953":[14737000003594123]}