Flash during transitions in 1.1 RC1 #3735

Closed
toddparker opened this Issue Mar 5, 2012 · 14 comments

Comments

Projects
None yet
5 participants
@toddparker
Contributor

toddparker commented Mar 5, 2012

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.

@ghost ghost assigned scottjehl Mar 5, 2012

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Mar 5, 2012

Contributor

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

Contributor

scottjehl commented Mar 5, 2012

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 5, 2012

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.

ghost commented Apr 5, 2012

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 comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 5, 2012

Contributor

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.

Contributor

toddparker commented Apr 5, 2012

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.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 5, 2012

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.

ghost commented Apr 5, 2012

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.

@ghost

This comment has been minimized.

Show comment
Hide comment
@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 5, 2012

Contributor

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.

Contributor

toddparker commented Apr 5, 2012

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.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 5, 2012

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.

ghost commented Apr 5, 2012

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.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 5, 2012

Update: I added

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

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

ghost commented Apr 5, 2012

Update: I added

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

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 5, 2012

Contributor

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)

Contributor

toddparker commented Apr 5, 2012

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

This comment has been minimized.

Show comment
Hide comment
@chafey

chafey Apr 9, 2012

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

chafey commented Apr 9, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 9, 2012

Contributor

@chafey - do you have a test URL?

Contributor

toddparker commented Apr 9, 2012

@chafey - do you have a test URL?

@chafey

This comment has been minimized.

Show comment
Hide comment
@chafey

chafey Apr 9, 2012

I think this problem is on my end, sorry for the false alarm

chafey commented Apr 9, 2012

I think this problem is on my end, sorry for the false alarm

@elfgoh

This comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 14, 2012

Hello, I reported a flashing issue with slidefade #4024 I do not know if it is an exact duplicate but thought I should highlight here too

elfgoh commented Apr 14, 2012

Hello, I reported a flashing issue with slidefade #4024 I do not know if it is an exact duplicate but thought I should highlight here too

@emmraja

This comment has been minimized.

Show comment
Hide comment
@emmraja

emmraja Feb 15, 2013

Flash during transitions problem is occurring by CSS or JS

emmraja commented Feb 15, 2013

Flash during transitions problem is occurring by CSS or JS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment