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

Closed
row1e opened this Issue Jul 10, 2013 · 25 comments
@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
jQuery Foundation member

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
jQuery Foundation member

@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
jQuery Foundation member

yes there is no animation at all if you set that

@arschmitz
jQuery Foundation member

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

@Dreampassport

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

@PangbornIdentity

Any updates on this issue?

@jzaefferer
jQuery Foundation member

@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
jQuery Foundation member

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
jQuery Foundation member

@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
jQuery Foundation member

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

@pdcable
@arschmitz arschmitz added a commit that referenced this issue Jan 22, 2014
@arschmitz arschmitz AnimationComplete: Add transition, fallbacks and remove memory leaks
Also no its own module including support tests for animations and
transitions

Fixes gh-5156
Fixes gh-6816
Fixes gh-6697
Fixes gh-6895
Fixes gh-6148
f4fbff2
@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?

@arschmitz arschmitz added a commit that referenced this issue Feb 12, 2014
@arschmitz arschmitz AnimationComplete: Add transition, fallbacks and remove memory leaks
Also no its own module including support tests for animations and
transitions

Fixes gh-5156
Fixes gh-6816
Fixes gh-6697
Fixes gh-6895
Fixes gh-6148
Closes gh-7001
0793219
@arschmitz arschmitz added a commit that closed this issue Feb 12, 2014
@arschmitz arschmitz AnimationComplete: Add transition, fallbacks and remove memory leaks
Also no its own module including support tests for animations and
transitions

Fixes gh-5156
Fixes gh-6816
Fixes gh-6697
Fixes gh-6895
Fixes gh-6148
Closes gh-7001
749c78e
@arschmitz arschmitz closed this in 749c78e Feb 12, 2014
@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.

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