bug: Animation jank and overscroll issues when using IonRipple within an IonTabs iOS application

Bug Report

Ionic version:

[x] 5.x

Current behavior:

I’ve discovered some odd animation jank and overscroll problems when using List items that contain an IonRipple in a Tabs application. Sometimes, when clicking on an item, it causes the list to shift down and you can no longer access the last item in the list (it gets shifted beneath the tab bar) Here’s how to recreate (timestamps of my recreation below instructions):

Link: https://streamable.com/9k8qi9

• When scrolling to the bottom of a list of items, scroll to the last item
• Stop where half of the last item is showing above the tab bar.
• Now click on that item (page routes forward) and then swipe back.
• If you try tapping on a new item in the list you’ll notice that the list gets shifted downwards and if you try swiping all the down to get to the bottom of the list, you can no longer do so (you can see the the last item due to overscrolling/rubberband scrolling on iOS).
• If you remove the IonRipple element from the last item, this no longer happens which leads me to believe something from the ripple animation is causing an issue with some sort of offset height in the IonContent

I’ve recreated this on the iOS simulator and on a physical iOS device, here are detailed timestamps of my video above:

0:00-0:04 - I scroll to the bottom of the list - lining up the last item to be halfway above the tab bar

0:04-0:06 - I route forward and back to the list

0:06-0:09 - I scroll to the bottom of the list (Kelly Richardson) to show that I can hit the bottom still, then line Kelly Richardson halfway between the tab bar (not sure if that’s really relevant)

0:10 - I tap on another element in the list and the screen snaps down a bit (the animation jank I was talking about)

0:10-0:16 - I now show that I can no longer scroll to the bottom of the list

Here’s the repo that I used (which is just the base Ionic List starter app with Tabs added on the App.tsx): https://github.com/uncvrd/ionic-animation-with-tabs

Ionic:

   Ionic CLI       : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.3.1

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res (update available: 0.15.1) : 0.14.0
   native-run                             : 1.0.0

System:

   NodeJS : v12.16.2 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

---

Edit: Also if you look closely at the video link…juuuuust as the page transition animation is finishing up (when I route forward a page) you can see that the list shifts up a tiny bit (look at the left side of the screen as the sliding animation finishes). This list shifting is noticeable when I swipe back because I have to swipe down to get where I was in the list afterwards

Edit 2: Here’s an additional video link of the same issue on my personal app. Switching tabs after the issue shows up fixes the problem until the ripple effect is triggered again while scrolling: https://streamable.com/srf6nr

[uncvrd]

@liamdebeasi thank you, I seem to keep finding bugs tangential to Ionic, sorry about that. I always appreciate you taking your time with these

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