Transition flashing && showing white "page" between pages

adrianbj

Re: Transition flashing && showing white "page" between pages

3 years ago

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!

arschmitz

Re: Transition flashing && showing white "page" between pages

3 years ago

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.

anyhoo

Re: Re: Transition flashing && showing white "page" between pages

1 year ago

I seriously doubt that this is the way it is intended to be. It is the opposite of sharp and always in control.

ytzhakov

Re: Transition flashing && showing white "page" between pages

3 years ago

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 :(

arschmitz

Re: Transition flashing && showing white "page" between pages

3 years ago

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.

ytzhakov

Re: Re: Transition flashing && showing white "page" between pages

3 years ago

Agreed.

Removing the fade without hacking in to the JQM code will be a very welcomed option.

toddparker

Re: Transition flashing && showing white "page" between pages

3 years ago

Hi all -

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:

https://github.com/jquery/jquery-mobile/issues/3735

Test page:

http://jsbin.com/avukid/3

http://jsbin.com/avukid/3/edit

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 Parker
jQuery Mobile & UI design lead
Partner, Filament Group Inc.

todd@filamentgroup.com

ytzhakov

Re: Re: Transition flashing && showing white "page" between pages

3 years ago

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.

arschmitz

Re: Transition flashing && showing white "page" between pages

3 years ago

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%); }
}

arschmitz

Re: Transition flashing && showing white "page" between pages

3 years ago

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.

flyingace

Re: Transition flashing && showing white "page" between pages

3 years ago

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!)

ytzhakov

Re: Transition flashing && showing white "page" between pages

3 years ago

I can confirm that the white page problem continues with the test page js and css. The flickering has disappeared in ios 5

baradas

Re: Transition flashing && showing white "page" between pages

3 years ago

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.

zSprawl

Re: Transition flashing && showing white "page" between pages

3 years ago

This removes the entire "fade" effect? That would be nice because I really dislike it...

---
http://zsprawl.com

arschmitz

Re: Transition flashing && showing white "page" between pages

3 years ago

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.

wdkissing..

Re: Transition flashing && showing white "page" between pages

3 years ago

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!

amar_jit

Re: Transition flashing && showing white "page" between pages

2 years ago

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.

muthukuma..

Re: Transition flashing && showing white "page" between pages

2 years ago

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

amar_jit

Re: Transition flashing && showing white "page" between pages

2 years ago

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.

danielc.h..

Re: Transition flashing && showing white "page" between pages

2 years ago

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);

This code does not:

$(".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

Response title

Attachments

jQuery Forum