Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: iOS shadow transition effect makes left swiper slide inaccessible #19466

Closed
hoi4 opened this issue Sep 27, 2019 · 9 comments

Comments

@hoi4
Copy link

commented Sep 27, 2019

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%

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
@ionitron-bot ionitron-bot bot added the triage label Sep 27, 2019
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Sep 27, 2019

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.

@ionitron-bot ionitron-bot bot removed the triage label Sep 27, 2019
@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation Sep 27, 2019
@liamdebeasi liamdebeasi moved this from Backlog 🤖 to Needs review 🤔 in Ionic Core Sep 27, 2019
Ionic Core automation moved this from Needs review 🤔 to Done 🎉 Sep 27, 2019
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Sep 27, 2019

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

@hoi4

This comment has been minimized.

Copy link
Author

commented Sep 27, 2019

@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 (#19051 (comment)). Maybe it would be possible to rename the config option and keep it.

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Sep 27, 2019

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

This comment has been minimized.

Copy link
Author

commented Sep 27, 2019

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

This comment has been minimized.

Copy link
Member

commented Sep 27, 2019

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

This comment has been minimized.

Copy link
Author

commented Sep 27, 2019

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

This comment has been minimized.

Copy link
Member

commented Sep 27, 2019

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

@hoi4

This comment has been minimized.

Copy link
Author

commented Sep 29, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Ionic Core
  
Done 🎉
2 participants
You can’t perform that action at this time.