Flickering transitions with 1.1.0-rc.1 on iPhone #3674

Closed
scottolsen opened this Issue Feb 29, 2012 · 19 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Mar 1, 2012

Contributor

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.

Contributor

toddparker commented Mar 1, 2012

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

This comment has been minimized.

Show comment Hide comment
@scottolsen

scottolsen Mar 1, 2012

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.

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

Show comment Hide comment
@role2000

role2000 Mar 2, 2012

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.

role2000 commented Mar 2, 2012

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

This comment has been minimized.

Show comment Hide comment
@toddparker

toddparker Mar 6, 2012

Contributor

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

Contributor

toddparker commented Mar 6, 2012

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

@scottolsen

This comment has been minimized.

Show comment Hide comment
@scottolsen

scottolsen Mar 8, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@HoffZ

HoffZ Apr 2, 2012

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/

HoffZ commented Apr 2, 2012

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

This comment has been minimized.

Show comment Hide comment
@jacobus

jacobus Apr 3, 2012

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

jacobus commented Apr 3, 2012

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

This comment has been minimized.

Show comment Hide comment
@igz

igz Apr 6, 2012

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.

igz commented Apr 6, 2012

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

This comment has been minimized.

Show comment Hide comment
@mrojas

mrojas Apr 11, 2012

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

mrojas commented Apr 11, 2012

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

@zezke

This comment has been minimized.

Show comment Hide comment
@zezke

zezke Apr 14, 2012

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

zezke commented Apr 14, 2012

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

@jacobus

This comment has been minimized.

Show comment Hide comment
@jacobus

jacobus Apr 14, 2012

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:

jacobus commented Apr 14, 2012

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

This comment has been minimized.

Show comment Hide comment
@HoffZ

HoffZ Apr 16, 2012

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")

HoffZ commented Apr 16, 2012

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

This comment has been minimized.

Show comment Hide comment
@elfgoh

elfgoh Apr 16, 2012

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

elfgoh commented Apr 16, 2012

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

This comment has been minimized.

Show comment Hide comment
@tegansnyder

tegansnyder Apr 19, 2012

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

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

This comment has been minimized.

Show comment Hide comment
@SarahJane87

SarahJane87 May 3, 2012

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%;
}

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

This comment has been minimized.

Show comment Hide comment
@jacobus

jacobus May 9, 2012

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 commented May 9, 2012

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

This comment has been minimized.

Show comment Hide comment
@jacobus

jacobus May 9, 2012

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

jacobus commented May 9, 2012

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

@BigDilettante

This comment has been minimized.

Show comment Hide comment
@BigDilettante

BigDilettante Jun 28, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@jaspermdegroot

jaspermdegroot Oct 3, 2012

Member

Closing as duplicate of #4024

Member

jaspermdegroot commented Oct 3, 2012

Closing as duplicate of #4024

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