Page scroll

[PerJensen]

Right now I'm testing jpanelmenu and elgg and ran into a problem. When the menu has been shown once I have choppy scrolling on pages - iPhone3, iPad3.

Any idea why or how to fix this?

Edit:

Without animation, "animated: false", there's no problem with scrolling.

[acolangelo]

Very strange issue. I haven't seen scrolling issues before with animation enabled.

There is an update to the plugin coming soon that will include full hardware acceleration, which should help any potential issues like this.

[dhanrajmanure]

Hi

The Japnel menu works fine in html pages but when i use in .net pages the header will be in fixed position and there will be no slide in and out in mobiles on clicking on menu icon, I have tested in Samsung S3, Iphone 4 with IO6

[PerJensen]

@dhanrajmanure It works fine for me with iOS6, besides the problem mentioned above. Did you try to play around with the pull request provided by jimmynotjim, it gives me a much smoother open/close animation.

[dhanrajmanure]

Thanks Per

It works fine withe html pages but when i implemented with aspx pages(Menus & Top bar in Masterpage and calling content throught content place holder) the header bar will be displayed full and it will not slide on clicking the Menu icon.

[jimmynotjim]

Are you using my translate3d PR? Fixed elements are a known issue w/ translate. I'll hopefully be working on a fix over the next two weeks if Anthony doesn't get to it.

[PerJensen]

@jimmynotjim I'm using your latest commit and as mentioned it's working very well. I still have the scrolling issue though, after the panel has been opened. Do you know a solution to this?

[jimmynotjim]

@PerJensen Do I need to visit that site on a mobile device specifically? I'm getting a full width display even with my browser narrowed down on desktop.

@dhanrajmanure I should have addressed that other comment directly to you. Are you seeing fixed element issues on the master code or using my PR code?

[PerJensen]

@jimmynotjim Yes, sorry I forgot to mention that. It's not responsive just sniffing useragent, the paneled view is only available on mobile devices.

[siddharth-satavalekar]

There is one more issue which i am facing on Samsung Galaxy S3 & on native browser:

When click on menu icon it slides in for the first time but when we click on menu icon for slide out; it never slides with soft touch but if we click&hold on the menu icon it slides out.

Let me know what can be done in this case.

[jimmynotjim]

@PerJensen really sorry I never got a chance to take a look at that demo page on a mobile, the last month has been crazy. Did you get it to work or move on to another solution? If you need me to take a look, let me know, I'm around tonight.

@siddharth-satavalekar You should probably open a new issue since @acolangelo closed this one already

[PerJensen]

@jimmynotjim I'm using it but without animation. Would be great if you find time to take a look.

But as mentioned, when the menu has been shown once scrolling is more or less gone.

Edit: removed demo link

[jimmynotjim]

@PerJensen I took a quick look since I was on break anyway. For some reason that I can't figure out, your body is being set to the viewport height. If you use Safari's new Developer mode you can inspect a device or the iOS Simulator. Under computed styles the body height is listed at 444px (for iPhone5 simulator anyway), but it's not being set by any styles (inline or otherwise).

For a quick fix, add -webkit-overflow-scrolling: touch to the body and you'll get native scrolling back. I'd still try and figure out the height issue, but this will at least get you moving again. Try disabling jPanel all together and inspecting that body height. It may not be a jPanel issue as much as when jPanel is activated, it's causing the bug to show up.

Good luck, sorry I couldn't find a total fix for it.

[PerJensen]

@jimmynotjim Thank you, -webkit-overflow-scrolling: touch; bring back scrolling, but also makes the slide worse.

I could not find the body height 444px you mention, my windows safari only show iOS 4.3.3 though. But once again thank you, I'll dig a little deeper into this.

[jimmynotjim]

Blah, welcome to the bugginess of Webkit and transform/translate. If you find anything make sure to post it here.

[mynameiscody07]

I think I had the same problem as above. For my site I implemented a sticky footer. To do this you have to set the html and body to 100%. I then have the jpanel menu appear on screen widths of a certain size and this kills scrolling on the iphone.

To fix it I set html and body height back to auto in a media query targeting devices of certain widths.

Hope this helps you out on getting to the root of this problem

[andig]

Same problem on iPhone4, iOS6. My feeling (no hard diagnosis done yet) is that body: 100%; causes the problem; unfortunately I need it for the menu to work. Doesn't seem actually opening the menu is the primary cause.
Has anybody else made progress on this one?

[adamhenson]

I had same issue. I think I have resolved this by using a -webkit prefix. Use the same style as the navigation panel on the main panel. Just add the style below:

.jPanelMenu-panel { overflow-y: scroll; -webkit-overflow-scrolling: touch; }

-webkit-overflow-scrolling is the key here for iOS.

:))))

[Mulegoat]

I had the same issue here, solved by removing height:100% on html & body. Cheers mynameiscody07

[robertcrenteria]

The source of the choppy scrolling is definitely html being set to 100%. However when removed the menu will flash open on pages that do not have content that fills the entire viewport. Anybody discover any solutions?

[susanBuck]

Also seeing choppy scrolling when wanting the html height to be 100% (for a sticky footer).

@adamhenson's fix (.jPanelMenu-panel { overflow-y: scroll; -webkit-overflow-scrolling: touch; }) does get rid of the choppiness, but seems to introduce another problem where the scrolling gets randomly stuck. If you're doing quick flicks scrolling, it'll go go go and then suddenly keep bouncing back into the same place, without letting you scroll further. If you stop and do a slow press-and-scroll (rather than a flick) it's okay again until the next time it does it.