Panel feature breaks down and die when scrolling fast in IOS 7

[row1e]

While panel is open and user scrolls up and down very fast, the panel close and the page breaks down after the footer.

The problem appears in Safari and Chrome browsers on the new IOS 7.

It works perfectly on Android and also on the desktops browsers.

[arschmitz]

We have discussed this and we will not not be making fixes for iOS7 until the actual release is out however feel free to file issues so we can track them and test to see if they still exist when official release comes out in fall.

[seanhsmith]

I've been having this same issue. It's almost like the panel gets stuck in the open position behind the header and content elements and then no longer responds to any open or close requests. Does anybody have any idea of exactly why this is happening? We are working on a redesign of our app and are hoping to release it next month after iOS 7 debuts but this is a serious show stopper for devices running iOS 7. I was thinking about filing a bug report with Apple about it since it may be a bug in the UIWebKit class.

[arschmitz]

@seanhsmith hard to say there are no handlers in panels that listen for scrolling directly and this is not an issue in ios5,6 so it does sound like an issue but we do not currently have an ios7 device ( we will be getting some very soon probably next month ) one thing that comes to mind though is swipe to close feature.

try turning this off and see if it still happens. it might be that your fast scrolling is trigger a ton of swipe events and making it freak out. there is a known bug that causes a swipe to be triggered on scrolling if you stray diagonally on ios.

if you could report backl on this it will be a big help towards tracking it down and fixing it

[seanhsmith]

I'm assuming you're referring to the data-swipe-close attribute and setting this to false? I've actually already tried doing that as a work-around... I've literally tried everything. I thought at first it was because I was using the "native scrolling" trick on the panel using the -webkit-scroll-overflow: touch; CSS property but even removing all of that CSS and going back to the plain version of using the panel still has the issue. I've tried using reveal, push and overlay animations and they all seem to have the issue... I haven't tried it without an animation yet so I'll give that a whirl and see if it has anything to do with it. Are CSS3 animations completely bypassed if the data-animate is set to false? If they are and that fixes the problem, then my money would be on a bug in iOS 7's underlying rendering engine and CSS3 animations.

[seanhsmith]

Actually, that might've been it. I set data-animate="false" on the panel element to disable the animation and I have yet to reproduce the issue whereas I could reproduce it pretty quickly before. I'm thinking this might be a glitch in iOS 7's CSS3 animation rendering. I've already submitted a bug report with Apple and I'll append this information to it... hopefully they'll resolve it before the final release.

[arschmitz]

yes there is no animation at all if you set that

[arschmitz]

@seanhsmith yes it does sound that way thank you for reporting the bug to apple would you mind posting any updates you get here since we cant see open tickets like that?

[seanhsmith]

Sure, no problem.

[Blossicot]

Issues related to swipe? I will add data-swipe-close="false" attribute to the panel.

[PangbornIdentity]

Any updates on this issue?

[jzaefferer]

@seanhsmith @arschmitz iOS 7 was released by now, the issue still exists. Any updates or ideas how to tackle this?

[veloek]

Any progress on this, @arschmitz ?

[jplaza]

Having the same issue here. I thought that disabling the animation would help but it's still closing when fast scrolling the menu. The only "good" thing of disabling the translate animation is that you can reopen the panel, the app doesn't freeze.

[arschmitz]

We have found the cause of this but sadly it cannot land in 1.4.0 and will be in 1.4.1 its too late to land the change now. you can work around this for now by setting swipe close to false

[jzaefferer]

@arschmitz can you share the details? Is there a workaround I can use until 1.4.1 is available?

[mtamony]

@arschmitz

How about some clarity? "setting swipe close to false"? Where? On panel? On page? In js?

[veloek]

@mtamony You set the attribute data-swipe-close="false" on the div that has the attribute data-role="panel".

[mtamony]

@veloek I actually ended up doing it in the js file. Seems to have worked. There seem to be a lot of issues with these panels.

[pdcable]

It also appears to be happening when you add swipeleft and swiperight handlers to an element. Scrolling will intermittently cause an error, breaking all javascript and reload is the only option. This does not happen on android or desktop, only on IOS devices. I have tested it in Safari on both IOS 6 and IOS 7, the issue happens on both versions. Is there still a plan to fix this before the rc goes live?

[pdcable]

Rather than disable swipe on the panel I disabled scrolling while the panel is open. It made a better functional choice for my site, but would not work for everyone.

[vutienthinh]

Is there any solutions to solve this issue now? I saw on official website of jquerymobile that 1.4.0 ver released.I don't know this issue is reloved or not.

[arschmitz]

this will be fixed in jqm 1.4.1 its a problem with ios not emitting the webkitAnimationEnd event while scrolling

[pdcable]

You are the man! Thanks for the update.

On Jan 16, 2014, at 11:20 PM, Alexander Schmitz notifications@github.com wrote:

this will be fixed in jqm 1.4.1 its a problem with ios not emitting the webkitAnimationEnd event while scrolling

— Reply to this email directly or view it on GitHub.

[dpolivy]

I'm seeing issues with the panel closing when scrolling on iOS 6 with 1.4 that I did not have with 1.3.2. I do have a fixed toolbar, as well, so not sure if it is #6347 I'm hitting instead. Should this pull request fix the issue on iOS 6 as well?

[matweb2000mt]

i have this same problem with my mobile site. is it possible to know the jquery changes done regarding to this issue from 1.3.2 to 1.4.2. because to upgrade from 1.3.2 to 1.4.2 i have to re-style my whole web site.