Flickering transitions with 1.1.0-rc.1 on iPhone

[scottolsen]

When I upgraded to 1.1.0-rc.1 yesterday, it is now flickering pretty bad when transitioning from page to page. It is fairly smooth with no flickering with 1.0.1. I'm using an iPhone 4s to test, haven't tried it on an android device yet.

http://bombay-cms.heroku.com/

[toddparker]

In the new transitions, we fade out then in pages. I notice that you have a bg image on the pages but do you set the bg color to be a darker color to match the image? I think that adjusting you theme should make a big difference.

Second, this uses fixed toolbars. I'd be curious to see it the blink goes away if you remove the fixed feature. If so, we should edit this issue to be more about blinks witt fixed bars. I dont see flickering in our docs so I think these two factors might be the bulk of the issue.

[scottolsen]

Adding a darker color to the bg makes a big difference but it still flickers really bad on the iphone with the fixed footers.

After removing the fixed footers and adding a darker bg color the flickering is better but still noticeable.

Currently I have no fixed footers and I added the image to the body background.

[role2000]

this flickering is very similar to that one i described for the xoom: #3676
i have a bg image on the pages too. changing the bg color doesn't make it better.

i've made a video to demonstrate it:

http://youtu.be/wZz_0IoJKrk

its made with the current demo http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/footer-persist-a.html
it behaves the same in my phonegap app.

what you see in the video is:
coming from page "footer bars" i click "navbars": you see a short flicker. i think this should be the fade, which was not smooth enough.
but then i click "persistent toolbars": first the page disappears completely, then you see a part of the fading (this time its smoother but not enough), but then the page disappears completely again before the second page appears.

at the end i show how the fixed footer flickers (same with header buttons; not shown in video).

in my phonegap app i've setted the transition to none, so the fade is not inbetween the two blank pages.
you then see only one time the blank page.

[toddparker]

I think this may be a duplicate of #3735 which we just checked in some fixes for. Can you confirm?

[scottolsen]

Finally got around to testing this. When I'm running the app from safari the flickering is gone, but if I add it to my home screen then launch it, the flickering is still there upon visiting each page for the first time. After I've hit all the pages and click around there is no flickering. Haven't tried running it through phonegap yet.

[HoffZ]

I got the same problem when using jQuery Mobile 1.1.0rc1 with PhoneGap. On the iPhone the headers will blink/flicker on transition to/from a header that has data-position="fixed". The flickering will not occur in Safari on the same device! Apparently UIWebView (what Phonegap uses) and Safari is not the same thing [1][2]

[1] http://www.appleinsider.com/articles/11/06/17/ios_5_supports_speedy_nitro_javascript_for_full_screen_web_apps.html
[2] http://gigaom.com/2011/03/15/report-apple-sandbags-home-screen-web-apps/

[jacobus]

Hi,

I just cloned the latest jquery mobile from git and it still has the same problem (using iPhone with PhoneGap and Safari on Mac). It appears to be lesser so if using fixed position toolbars.

However, the biggest roleplaying factor is using rel="external" in links. The transition without the rel="external" is a smooth fade to white and then fade to the target, where rel="external" causes the screen to give a quick white flicker.

By the way, is there any way of using the background color as the fade-to color, rather than white. The white really deteriorates from the visual appeal it the page background in non-white.

Kind regards,
Jacobus

[igz]

I'm still seeing issue in 1.1.0rc2, but only inside UIWebViews in a native iOS application (not PhoneGap, but same principle.) Viewing these pages in Safari shows no problems.

When transitioning using either old or new transition styles, the $to screen flickers after loading. This seems to happen mostly when the previous page is on the heavy side and has been scrolled.

I'm able to get rid of the issue by making the scrollPage function do nothing and return immediately (in jquery.mobile.transition.js).

Though with this, even though the flicker is gone, I do get occasional flashes of redraw tiling (seemingly from the $from page).

NB - I'm using a pared down version of JQM 1.1 rc2 for lighter weight, but these issues occur with the CDN build as well.

[mrojas]

Same issue here with JQuery Mobile 1.1.0rc2, iOS 5.1 and PhoneGap 1.5.0

[zezke]

Same issue here with JQuery Mobile 1.1, iOS 5.1 and PhoneGap 1.5.0.

[jacobus]

Hi,
Try jQuery Mobile 1.1 rc 2 with jQuery 1.7.1. To me it was is a great
improvement.
Regards,
Jacobus
On Apr 14, 2012 11:45 AM, "zezke" <
reply@reply.github.com>
wrote:

[HoffZ]

Just tested with the new jQuery Mobile 1.1.0 Final, jQuery Mobile CSS 1.1.0, jQuery 1.7.1 and PhoneGap 1.6 on iOS 5.1: Still flickering on transitions with fixed headers (data-position="fixed")

[elfgoh]

I also had issues using jQuery Mobile 1.1.0 Final, jQuery Mobile CSS 1.1.0, jQuery 1.7.1 and PhoneGap 1.4 on iOS 5.1: reported at #4024

[tegansnyder]

same issue jQuery Mobile 1.1.0 Final, jQuery Mobile CSS 1.1.0, jQuery 1.7.1 and PhoneGap 1.6 on iOS 5.1

[SarahJane87]

I got rid of the flicker! With static header and footer.
I have my css as below and no data-position="fixed" on the header and footer.

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
overflow: hidden;
-webkit-backface-visibility: hidden;
}

div.ui-header {
position:fixed;
z-index:10;
top:0;
width:100%;
padding: 13px 0;
height: 15px;
}

.ui-content {
padding-top: 57px;
padding-bottom: 54px;
overflow: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.ui-footer {
position:fixed;
z-index:10;
bottom:0;
width:100%;
}

[jacobus]

Thanks Sarah Jane, I tried your suggestion, but unfortunately there is still a flicker between my pages.

In my case, I did notice that the flicker has to do with external page linking, as described in the jQuery mobile doc below. If you remove the external attribute from the link, then the flicker goes away, but that screws up the navigation :-o

Local, internal linked "pages"

A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a data-role of "page". Each 'page' block needs a unique ID (id="foo") that will be used to link internally between 'pages' (href="#foo"). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.

It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts.

For example, a link to a page containing multiple internal pages would look like this:
Multi-page link

[jacobus]

Link to external reference doc for jQuery mobile multipage linking.
http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html

[stevebatcup]

Sarah Jane, your fixed worked great for me on jQuery Mobile 1.1.0, jQuery 1.7.2 and PhoneGap 1.7.0 on iOS 5.1.1
It also fixed the rendering of simpledeialog2. Thanks a lot.

[jaspermdegroot]

Closing as duplicate of #4024