Skip to content
This repository

Slide page transition causes screen repaint on iOS 5 chromeless #2856

Closed
ggear opened this Issue October 26, 2011 · 27 comments
Graham Gear

Environment:
jquery-mobile 1.0rc2
IOS 5.0

If I add a shortcut to a jquery mobile app via the "Add to Home Screen" and I specify a "apple-mobile-web-app-capable" meta tag (ie chromless) I notice that the slide page transition cause a screen flash on transition.

This does not occur when the app is rendered in iOS Safari normally.

Jake Boone

You can test this with the official docs here: http://jquerymobile.com/test/docs/config/iOSFullscreen.html

Graham Gear

Unfortunately I cannot test with the official docs, since navigating to the page transition doc breaks me out of the chomeless mode.

The issue is however evident in the official docs during the "Pages & dialogs" default transition, while still in the chromeless frame. Clicking it in chromeless mode results in the page transition and then a very noticeable screen repaint, curiously constrained to the left half of the screen - could this be back button related?

This is issue is not apparent in a normal browser window.

Note that I have also encountered this with the 'slide' transition which is my primary concern, other transitions seem to work OK.

Todd Parker

@ggear - I think @jakeboone was suggesting that you open that test page above, save it to your homescreen then navigate the docs. Every page in the docs uses the slide transition so you don't need to go to the transition page to test. That page uses a data-ajax attr because it's a multi-page doc.

anpsince83

I'm seeing this behavior on iPad2 with iOS5. It doesn't appear to be exclusive to the slide transition, however. Most of the docs use a fade transition and it occurs with that as well. There is a quick white flash that occurs on the left half of the page towards the end of the transition with slide and fade transitions. The flip transition seems to be okay. And the pop transition there is a flash at the top of the page, but it shows the page below, and not the white content area.

bjornhij

Not sure why, but by coincidence we found the following CSS fixes the flicker/flash during slide transitions:

.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Also the touchoverflowenabled switch fixes it when turned on, but that causes our phonegap application to freeze after a few page transitions.

Graham Gear

Thanks @bjornhij, your CSS fixes certainly work around the issue for me.

I presume the framework should adopt this at some point.

Graham Gear

Actually, spoke too soon, with the CSS changes suggested by @bjornhij I have seen some slide transitions flicker free, but it still occurs more often than not.

Not sure if this is relevant, but it only occurs on the initial page transition, the return via the generated Back button does not flicker.

bjornhij

Not sure if it helps for you but the CSS is in a separate CSS file that is loaded as the last CSS file.

Another thing we changed earlier (that helped a bit) is removing the top center no-repeat from the background property:

background:#cdcdcd url(../img/content.jpg) top center no-repeat; -> background:#cdcdcd url(../img/content.jpg);

Graham Gear

It turns out the CSS fix suggested by @bjornhij does work around the issue, only for some reason the fullscreen version of the app had cached the old css and refused to retrieve the newer version. This is despite flushing the Safari cache and seeing the new CSS in the full Safari browser pulled down correctly. I could not find a way to manually flush the fullscreen web resource cache ... and had to wait a few hours before it finally brought it down. But I digress.

Work around confirmed.

hhytt

The suggested CSS fix for iOS 5 did not work for me. However, I was able to track down in the JS code the cause of the flicker/flash. Calling the focus() method on the ui-title within the reFocus() function causes the white block to appear when sliding in from the right. You can see this happening if you hardcode JS alerts before and after the focus() call. If the focus() call is commented out, no flickering occurs.

anpsince83

@hhytt, did commenting out that focus call have any affect on the other transitions? Or just slide only? I was experiencing the white flicker on the fade transition and a blank flash during the pop transition.

hhytt

@anpsince83, unknown, though I will give it a try on fade and pop tomorrow. The app I tested only implemented the slide transitions. I will do additional testing to find the purpose of the focus() call as well. Possibly it's used to force the keyboard closed and/or ensure no focus on input elements before transition.

hhytt

Fade and Pop do work without the flicker as well when the focus() call is bypassed.

Todd Parker

The issue with not managing focus is that focus could remain on a hidden page, not the active one.

pschilly

I am also having this issue on the iPad 2, iOS 5.0.1 - All transitions.

@hhytt - Where did you comment out the focus() call?

Also if this helps - This issue does NOT occur in iOS 5.0.1 on the iPhone 4.

EDIT:

Nevermind I found where the part was.

Approx Line: 2322 ( function reFocus ( page ) { ... )

Commenting out: pageTitle.focus();

Fixed the issue in the iPad - All transitions work now.

Also does not break the iPhone 4's already working functionality....

Have you found what this function is used for?

hhytt

@pschilly, no, I'm still not clear on the purpose of the focus() line. I can say that after three weeks of heavy use no problems have yet materialized from bypassing the call, and transitions continue to work without fail.

btw I'm still using RC2. I have not yet tested with RC3 or rather 1.0 to see if the issue still exists.

pschilly

The issue exists in 1.0 - and the fix you suggested fixed it.

ghowen

Yes, this fixes the problem for me too on an iPad 2 with iOS 5.0.1 and JQM 1.0. To flush the cached CSS of a webapp on the homescreen I found that turning the iPad off and on again helps.

pschilly

@ghowen If you just close the application it does as well. I don't mean return to the home screen I mean double press the home button and close the running in the background application process of the webapp.

Piotr Walczyszyn

I have the same issue running on iPad 2/iOS 5.0.1, jQM 1.0.1, PhoneGap 1.4.1.

Commenting out: pageTitle.focus() in the reFocus() function works for me although I feel like its a nasty hack ;)
In jqm-1.0.1 it is around line 2398.

p.

baradas

Tried this on the latest code branch and the issue persists inspite of trying the above techniques. Any alternative solution would be appreciated.

  1. Commented out the focus code
$.mobile.focusPage = function ( page ) {}
  1. Used the below CSS
.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
benjaminketron

Using jQuery Mobile 1.0.1 and PhoneGap 1.4.1 have actually enjoyed luck with

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page
{
overflow: visible;
}

Jasper de Groot
Owner
uGoMobi commented May 26, 2012

Can anyone let us know if this is still an issue with latest code? pageTitle.focus() is still in the code but transitions are renewed.

Jasper de Groot
Owner

All,

If the issue is still there with latest code we really need a test page so we can reproduce the issue. Otherwise we have to close.
Here you can find our JSBin template and instructions: https://github.com/jquery/jquery-mobile#issues

BTW - This sounds related to changes as proposed in PR #4129 for the slide transition CSS

Jasper de Groot
Owner

Closing. If it is still an issue with latest code, please comment.

Jasper de Groot uGoMobi closed this June 24, 2012
ubernaut

I'm still getting this issue in 1.1.1 on IOS 5 in fullscreen UIWebview apps. on all transitions. FML

Jasper de Groot
Owner

@ubernaut - Can you provide a test page using our JSBin template that uses latest code? See https://github.com/jquery/jquery-mobile#issues. Thanks!

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.