iOS - While sliding right/left vertical scroll happens

[romanovma]

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request

Current behavior: I use with fixed height in the middle of the page. When I start sliding left/right say in Chrome then vertical page scroll is disabled. In iOS Safari however while sliding left/right vertical scrolling happens as well.

Expected behavior: Like in chrome vertical scroll is disabled.

Steps to reproduce: see Current behaviour

Related code:

      <ion-slides #daySlider slidesPerView="5" (ionSlideDidChange)="onDaysSlideDidChange()" (ionSlideReachEnd)="onDaysSliderEndReached()"
        (ionSlideReachStart)="onDaysSliderStartReached()" (ionSlideNextEnd)="onDaysSliderNextEnd()" (ionSlidePrevEnd)="onDaysSliderPrevEnd()">
        <ion-slide class="meal-plan-filter__day-slide" *ngFor="let day of days; let i = index">
          <button ion-button outline class="meal-plan-filter__day-button" [ngClass]="{'active': day === activeDay}" (click)="setActiveDay(day, i)">
            {{ 'DAYS.SHORT.' + (day | getWeekDay) | translate }}
          </button>
        </ion-slide>
      </ion-slides>

    &__day-slider {
      height: 25vw;
      display: flex;
      position: relative;
    }

Other information: tested both in Ionic View and Ionic Dev - same result

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.2.1
    npm  : 5.6.0
    OS   : macOS Sierra

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

[romanovma]

Here in Ionic example app I can see the same behaviour: http://ionic-team.github.io/ionic-conference-app/www/#/tabs/schedule/schedule

When I swipe item to mark it as favorite vertical scroll is locked in Chrome. It is not locked in iOS Safari though which leads to poor UX

[romanovma]

And another note: underlying swiper works perfectly in Safari iOS: http://idangero.us/swiper/demos/ Which means that something wrong with Ionic wrapper around it.

[romanovma]

I believe this is caused by the fact that passive touch events are not cancelable in iOS 11.1+ that's why preventDefault for touchMove doesn't affect anything while sliding left/right. At the same time I understand performance implications of not using passive events for scrolling and anyway cannot find the place where I can disable them. Do you guys from Ionic Team have any advice or thoughts on the issue?

[romanovma]

so this is the fix:

window.addEventListener( 'touchmove', function() {});

please let me know if you find any better solution :) thanks

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

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