Panel Flickering on iOS and Android

[dewamonyet80]

Hi,

I'm using jquery 1.9.1 and jquerymobile 1.3.0.
I've setup a left panel open following the standard guideline.

The problem is every time the panel is opened, it causes a white flickering on the panel content. If the panel content is less than 7 list (ie. fit into the iOS browser), the flickering doesn't happen. And occasionally if the flickering doesn't happen, when you try to open the panel from say half a page down in the main page, the panel tries to go back to the very top content but doesn't work.

Is this an issue in jquerymobile?
Please advice.

Thank You

[jaspermdegroot]

@dewamonyet80

This has to do with hardware acceleration. Does setting.ui-panel .ui-listview { -webkit-transform: translate3d(0,0,0); } and/or .ui-panel .ui-listview .ui-btn { -webkit-transform: translate3d(0,0,0); } resolve the flickering problem? If so, we can add information about this to the API documentation after testing it on other platforms/browsers as well.

Please provide a test page instead of an image of the code and tell us about on which iPhone/iPod and iOS version you tested. Our JS Bin template and instructions are in the contributing guidelines.

I already made a few changes in the panel widget. Do you still see the not scrolling to top after unfixing the panel issue when you test with latest code?

[dewamonyet80]

Hi @uGoMobi,

Thanks for the reply. Sorry about that, here's the test page:

Preview @ http://jsbin.com/alofim/4/
code @ http://jsbin.com/alofim/4/edit

I tried the translate3d thing, but it still gives me the same result. As you can see from the test page, if you open up the panel half way down the content from the main page, it gives you a breeze white flickering.

This doesn't happen however on computer as it gives you full view of the content and the panel. I think it's trying to fit into the device browser screen somehow.

I'm using iPhone 4s with iOS6.1.2. Tested with safari and chrome.

Thank You

[jaspermdegroot]

I could reproduce both issues. On Android (tested on Galaxy Nexus 4.2.1) the panel content wasn't visible each time you opened the panel after scrolling down a bit first. Fix for both issues is on its way.

[jaspermdegroot]

@dewamonyet80 - Can you test http://jsbin.com/alofim/4 again and confirm if the issue has been resolved? Thanks!

[dewamonyet80]

Hi jasper,

Much better! :) except i still see occasionally flickering. If u scroll the content on the main page all the way down, it briefly shows the background ( you know that box that says "edit on js"). I think thats what happened previously too, the background page is showing briefly. I'm going to test further with my actual content though to be sure. Do i need to update the css or js files from 1.3.0 for the fix?

One more thing though, i'm using fixed-positioning panel. Half way down the content, the panel shows only half way down also. It doesn't show from the very top. Think this is another issue.

Thanks a lot jasper. Much appreciated.
—
Sent from Mailbox for iPhone

On Thu, Apr 4, 2013 at 9:02 PM, Jasper de Groot notifications@github.com
wrote:

@dewamonyet80 - Can you test http://jsbin.com/alofim/4 again and confirm if the issue has been resolved? Thanks!

Reply to this email directly or view it on GitHub:
#5831 (comment)

[jaspermdegroot]

hi @dewamonyet80

Thanks for the quick reply.
I added a rule to hide that "edit in JS Bin" label: http://jsbin.com/alofim/8
If you want to do more testing, use latest code (see the links in the head of that JS Bin).

Re: fixed positioning. We unfix the panel if the content is larger than the viewport to make sure the user can scroll the panel content. Right now we only scroll to top if no panel content is in view. Maybe we should change this logic in 1.4 and always scroll to top when opening a panel that doesn't have fixed position (anymore).

[dewamonyet80]

Ohh i see what the blinking was. This now only happens when you scroll the main content all the way to the bottom.  Then if you open the panel, the content of the main page tries to go back to the very top. And that we can see very briefly as the panel opens.

Re: fixed position
Oh i see okay.

Thanks jasper
—
Sent from Mailbox for iPhone

On Thu, Apr 4, 2013 at 10:02 PM, Jasper de Groot notifications@github.com
wrote:

hi @dewamonyet80
Thanks for the quick reply.
I added a rule to hide that "edit in JS Bin" label: http://jsbin.com/alofim/8
If you want to do more testing, use latest code (see the links in the head of that JS Bin).

Re: fixed positioning. We unfix the panel if the content is larger than the viewport to make sure the user can scroll the panel content. Right now we only scroll to top if no panel content is in view. Maybe we should change this logic in 1.4 and always scroll to top when opening a panel that doesn't have fixed position (anymore).

Reply to this email directly or view it on GitHub:
#5831 (comment)

[jaspermdegroot]

@dewamonyet80 - There is already a feature request for making the panel and page scroll independently (#5493) which will resolve that. We will look into that in a future version.

[jaspermdegroot]

@toddparker - Do you agree we should always scroll to top when opening a panel (unless it still has position fixed), not just if the panel content is not in view?

@agcolom - If we change this I have to update the documentation for 1.4. I was wondering how we deal with different information for different versions in the API docs.

[toddparker]

I think we should tighten up the scroll to top threshold to be closer to 20-30px. The threshold is nice to keep the page from jumping if you've only scrolled a tiny bit but I think it's too high now.

[dewamonyet80]

Scrolling independantly between the panel and the main page is very nice.  It is what's expected of panel's function. Looking forward to it.
—
Sent from Mailbox for iPhone

On Fri, Apr 5, 2013 at 9:40 PM, Todd Parker notifications@github.com
wrote:

I think we should tighten up the scroll to top threshold to be closer to 20-30px. The threshold is nice to keep the page from jumping if you've only scrolled a tiny bit but I think it's too high now.

Reply to this email directly or view it on GitHub:
#5831 (comment)

[jaspermdegroot]

I created a new ticket for the scroll to top threshold #5858

[jaspermdegroot]

@dewamonyet80

Unfortunatelly we had to revert a part of this fix. The fix for the panel not appearing at all on Android is still in the framework, but the fix for the blink on the page content on iOS has been removed. See #5861 for the explanation.

You might want to try and test adding this to your custom CSS:

.ui-panel-animate.ui-panel-content-wrap > .ui-content,
.ui-panel-animate.ui-panel-content-wrap > .ui-footer  {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}

We keep looking into this.

[dewamonyet80]

@ugomobi ok np thanks for all the help. Do you know a quick fix to scroll panel and page independently?
—
Sent from Mailbox for iPhone

On Sat, Apr 6, 2013 at 4:56 AM, Jasper de Groot notifications@github.com
wrote:

@dewamonyet80
Unfortunatelly we had to revert a part of this fix. The fix for the panel not appearing at all on Android is still in the framework, but the fix for the blink on the page content on iOS has been removed. See #5861 for the explanation.
You might want to try and test adding this to your custom CSS:

.ui-panel-animate.ui-panel-content-wrap > .ui-content,
.ui-panel-animate.ui-panel-content-wrap > .ui-footer  {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
}

We keep looking into this.

Reply to this email directly or view it on GitHub:
#5831 (comment)