bug: iOS shadow transition effect makes left swiper slide inaccessible

[hoi4]

Ionic version:

[x] 4.x

Current behavior: When using ion-slides, the shadow transition effect (iOS only, added in #18661) of the slide with index i+1 covers the slide with index i. This is because the transition-effect has a css of left: -100% https://github.com/ionic-team/ionic/blob/9b075ef52968435a37487ae742e2afeed9fb4b12/core/src/components/content/content.scss#L126

Expected behavior: All pages of the swiper should be accessible

Sample Application: https://github.com/hoi4/shadow-transition-test

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : 0.3.0 (update available: 0.6.0)
   native-run  : 0.2.3 (update available: 0.2.8)

System:

   NodeJS : v10.15.0 (/usr/local/Cellar/node@10/10.15.0/bin/node)
   npm    : 6.11.3
   OS     : macOS Mojave

[liamdebeasi]

Thanks for the issue. So there are 2 problems here:

1. The transition cover probably shouldn't have any pointer-events attached to them.
2. You should not have more than one ion-content on a given page.

We will add a fix for the first one, but I recommend removing the ion-content elements in your slides.

[liamdebeasi]

This issue has been fixed and will be available in the next release of Ionic. Thanks!

[hoi4]

@liamdebeasi Thanks for the quick reply and the fix!

Unfortunately I need to use nested ion-contents within the slides. In our project, we use a multiple-tab layout where the different tabs can be swiped between. Every tab (slide) contains a full scrollable page, so we absolutely need the nested ion-contents. The migration guide from v3 to v4 also states, that ion-contents can be nested (https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#content)

If there is no other way of making this possible, it would be great, if I could choose to not use the shadow transition-effect. Currently this is done via the config option experimentalTransitionShadow, but this is planned to be removed in the next major release (https://github.com/ionic-team/ionic/pull/19051#issue-305673571). Maybe it would be possible to rename the config option and keep it.

[liamdebeasi]

Hmm I think the breaking change document may have been incorrect. The latest documentation states that there should be only one ion-content in a single view: https://ionicframework.com/docs/api/content. I would recommend you see if you can find a way to remove the outer ion-content so you can swipe between tabs easily. Other issues inevitably come up when nesting ion-content elements.

I added pointer-events: none to the transition shadow, so it should never interfere with the functionality of your app.

[hoi4]

The main reason why we use nested ion-contents is the native-like scrolling behaviour. When replacing the ion-contents inside the swiper-slides with normal divs with overflow: scroll, scrolling does not have the same nice physics-effect. Scrolling only a fraction of a page is oftentimes needed, I would guess 🤔

Maybe an alternative would be to provide an ion-scroll component that provides the native-like scrolling and can be nested as needed.

[liamdebeasi]

You can add -webkit-overflow-scrolling: touch to those divs to get the inertia scrolling. (On iOS 13 this is enabled by default, but on older versions of iOS you need to specify in the CSS)

[hoi4]

You can add -webkit-overflow-scrolling: touch to those divs to get the inertia scrolling. (On iOS 13 this is enabled by default, but on older versions of iOS you need to specify in the CSS)

Very helpful information! Thank you very much! 🎉

Another reason to use nested ion-contents is that it is the only way to use an ion-refresher. Do you have an idea about that?

[liamdebeasi]

Currently ion-refresher requires an ion-content. Not sure about the work required to get it working on arbitrary scrollable content.

[hoi4]

Ok, then we will keep the nested ion-contents for now. Thanks again for your great help!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.