Skip to content
This repository

Flash during transitions in 1.1 RC1 #3735

Closed
toddparker opened this Issue March 04, 2012 · 14 comments

5 participants

Todd Parker Scott Jehl Chris Hafey elfgoh rajaemm
Todd Parker

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.

Scott Jehl
Scott Jehl scottjehl closed this issue from a commit March 05, 2012
Before a page is shown, add its theme to the page container. This ens…
…ures that a page will transition through the color of the page that is going to be shown. Before a page is hidden, remove its theme class from the container. Pagehide is triggered before pageshow, so the newly showing page will be set on the container before the transition, despite the removal from the outgoing page's pagehide event. Lastly, the dialog plugin overrides the page container theme when a dialog is about to be shown. Fixes #3735
10b905a
Scott Jehl scottjehl closed this in 10b905a March 05, 2012
Deleted user
ghost commented April 04, 2012

The content you are editing has changed. Reload the page and try again.

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.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Todd Parker

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.

Deleted user
ghost commented April 04, 2012

The content you are editing has changed. Reload the page and try again.

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.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Deleted user
ghost commented April 04, 2012

The content you are editing has changed. Reload the page and try again.

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.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Todd Parker

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.

Deleted user
ghost commented April 04, 2012

The content you are editing has changed. Reload the page and try again.

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.

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Deleted user
ghost commented April 04, 2012

The content you are editing has changed. Reload the page and try again.

Update: I added

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

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

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Todd Parker
Chris Hafey

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

Todd Parker

@chafey - do you have a test URL?

Chris Hafey

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

elfgoh

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

rajaemm

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
Something went wrong with that request. Please try again.