ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.94k stars 13.52k forks source link

[Ionic 3] Slider gets stuck between two slides on iPhone X/10 #15280

Closed ErlendEllingsen closed 5 years ago

ErlendEllingsen commented 6 years ago

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)  : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.0.1, cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 7 other plugins)

System:

   ios-deploy : 2.0.0
   ios-sim    : 6.1.2
   NodeJS     : v8.1.2 (/usr/local/bin/node)
   npm        : 6.0.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Describe the Bug This is a bug related to slides / ion-slides. On iPhone X, the "slider" can sometimes come partially stuck between two slides. This happens when iPhone X users perform the diagonal swipe from bottom center to right in order to see all running apps / open the app switcher.

I suspect this happens because the ionic app "thinks" the user is trying to swipe, but the iPhone is pausing the app mid- action.

Steps to Reproduce Add slides to your ionic 3 app, perform the swipe mentioned earlier ~5-6 times (usually does it for me).

Expected Behavior The slides should fall back / reset to their normal state.

Related code I managed to partially fix this issue by placing a resume listener and calling this.slides.slideTo(this.slides.getActiveIndex());

Full code: (in constructor)

    this.onResumeSubscription = plt.resume.subscribe(() => {
      this.slides.slideTo(this.slides.getActiveIndex());
    });

Additional Context Screenshot from bug: https://i.imgur.com/U5mlJYg.png

mhartington commented 6 years ago

Hi there! This appears to be an issue, but there's no information on how to recreate or how to debug this. Could you please provide some more information or a demo in the form of a github repo? Thanks!

Simbaclaws commented 6 years ago

This could be related to the fix I found in this issue: https://github.com/ionic-team/ionic/issues/15306 Maybe calling slides.update when the app resumes with the aforementioned fix in the issue I mentioned could fix this.

I'm pretty certain the translate3D values aren't updated for the swiper-wrapper.

ErlendEllingsen commented 6 years ago

That sounds reasonable @Simbaclaws I will update the issue with more details when I have time!

johanlantz commented 6 years ago

I can confirm this is 100% reproducible on all our iPhone models. If I swipe quickly, it is guaranteed to happen sooner or later.

I have little tests done in Android but I just tested it on an S7 and I could not provoke the same behaviour. That said, the Android performs way slower than the iPhone so maybe that has an impact since it seems to have a higher risk of happening if I swipe quickly

Will see if I can provide a test project but I have the feeling it has a higher risk of happening if the slide is a bit more complex, for instance not only text but with checklists, textareas etc. It normally gets stuck exactly bewtween the two slides or just a little bit into it like in the image below: img_3242

bitflower commented 6 years ago

Could be related https://github.com/ionic-team/ionic/pull/15576

ionitron-bot[bot] commented 5 years ago

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

ionitron-bot[bot] commented 5 years ago

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/666