Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Panel Flickering on iOS and Android #5831

Closed
dewamonyet80 opened this Issue · 14 comments

3 participants

@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.

Screen Shot 2013-03-30 at 6 38 38 PM

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
Collaborator

@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
Collaborator

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
Collaborator

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

@dewamonyet80
@jaspermdegroot
Collaborator

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
@jaspermdegroot
Collaborator

@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
Collaborator

@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
@jaspermdegroot
Collaborator

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

@jaspermdegroot
Collaborator

@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
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.