Flash during transitions in 1.1 RC1

[toddparker]

As reported in the forums, there is a flash to white between all transitions in 1.1:
http://forum.jquery.com/topic/page-transitions-on-1-1-0-rc-1#14737000003100717

We do fade out the contents of a page before doing the scroll jump, but the page bg gradient (or at least bg color) should remain and cross fade between pages. It seems that we always fade to white instead of the bg of the page.

I created a very simple jsbin that illustrates the issue. It has two pages that both use theme swatch A (page A and B) and a third that uses swatch E (page c).
http://jsbin.com/avukid/3
http://jsbin.com/avukid/3/edit

I would expect that when going from A to B (both swatch A = black), that the contents of A would fade out then B would fade in, but it does seem to fade from black to white to black again. Same story when going to E.

Ideally, we'd keep the bg color in place. The bg image is harder because we will be scrolling the page so we don't want that to shift around when scrolling so a flat color is probably best.

[scottjehl]

maybe the workaround we do for dialog backgrounds can just apply to all. if anyone gets to this before me, see dialog plugin
On Mar 5, 2012, at 8:53 AM, Todd Parker wrote:

As reported in the forums, there is a flash to white between all transitions in 1.1:
http://forum.jquery.com/topic/page-transitions-on-1-1-0-rc-1#14737000003100717

We do fade out the contents of a page before doing the scroll jump, but the page bg gradient (or at least bg color) should remain and cross fade between pages. It seems that we always fade to white instead of the bg of the page.

I created a very simple jsbin that illustrates the issue. It has two pages that both use theme swatch A (page A and B) and a third that uses swatch E (page c).
http://jsbin.com/avukid/3
http://jsbin.com/avukid/3/edit

I would expect that when going from A to B (both swatch A = black), that the contents of A would fade out then B would fade in, but it does seem to fade from black to white to black again. Same story when going to E.

Ideally, we'd keep the bg color in place. The bg image is harder because we will be scrolling the page so we don't want that to shift around when scrolling so a flat color is probably best.

---

Reply to this email directly or view it on GitHub:
#3735

I see the same thing too on iPhone 3GS. The flash to white lasts a second or two, so it looks pretty bad.

The 1.1.0 GA will have this fixed, right?

Thanks.

[toddparker]

This is patched up in master:
jquerymobile.com/test

We now cross fade between the bg color of the pages. In RC1, we faded to white in between pages which was more jarring.

By the way, the page transition I see the flash issue with results from clicking on a button in the header, which is pretty standard usage.

My last comment should read like this:

By the way, the page transition I see the flash issue with results from clicking on a

button in the header, which is pretty standard usage.

One more thing: I don't use any animation, i.e., no sliding, etc. That seems to be the default, since I don't specify anything for $.mobile.defaultPageTransition.

[toddparker]

The default transition is "fade" unless you set this via global config. If you can post a test page illustrating the issue, it would be helpful.

I just added

$(document).bind("mobileinit", function () {
    $.mobile.defaultPageTransition = 'none';
});

The white screen is still there between page transition.

What I have is a local working copy, so I'll look into where to post a test page. In the meantime, if there is a workaround for this blank screen issue with no PageTransition effect, please let me know. Thanks.

Update: I added

$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = 'none';
});

in the right place. So, I don't see the white screen anymore.

[toddparker]

Good to hear this is working for you now.

On Apr 5, 2012, at 2:15 AM, "Lynn" reply@reply.github.com wrote:

Update: I added

$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = 'none';
});

in the right place. So, I don't see the white screen anymore.

---

Reply to this email directly or view it on GitHub:
#3735 (comment)

[chafey]

I am running RC2 and am seeing a white page flash during transitions on iPad 3 (in browser and web app) and Firefox desktop (didn't try others). I am transitioning to external jquery-mobile pages in the same domain. My app uses the "a" theme which is dark so it really shows up. I am using data-transition="none" to workaround this now. I assume the fix on 4/5 made it into RC2 so I don't think