bug: ios native refresher refreshes too early when used in modal

[EinfachHans]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

I use a Refresher within a Modal (iOS Card Style). It behaves not like as i expect, because it doesn't have the native look like the other refreshers. while i would expect the refresher to "show more" as more i pull down, it bugs, and start the refreshing very early.

Also in noticed that the spinner in my project is kind of behind the list (but visible) and only hides if i press or move anything.

Expected behavior:

The Refresher should work in a Mode where anywhere else.

Steps to reproduce:

I have created a small Repo: https://github.com/EinfachHans/ionic-refresher-bug
It contains the "main" bug, but i can't reproduce the other bug that the spinner is over the list, so i create a small video to help you. Maybe you have an idea or it's related to the same underlaying issue?

Ionic info:

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 24 other plugins)

Utility:

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

System:

   Android SDK Tools : 25.2.3 (/Users/hanskrywalsky/Library/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v12.18.3 (/usr/local/bin/node)
   npm               : 6.14.8
   OS                : macOS Catalina
   Xcode             : Xcode 12.0.1 Build version 12A7300

[EinfachHans]

@liamdebeasi i would love to create a PR for this - can you quickly explain me how can i use my local ionic fork in an app and how to debug the ionic code (refresher code in this case)?

[liamdebeasi]

Thanks! We have a contributing guide here: https://github.com/ionic-team/ionic-framework/blob/master/.github/CONTRIBUTING.md#creating-a-pull-request. It explains how to get Ionic building locally.

The fix for this is very likely going to be in scrollListenerCallback: https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/refresher/refresher.tsx#L173.

The math we do in https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/refresher/refresher.tsx#L210-L213 is probably incorrect when used in a modal.

[EinfachHans]

Thx @liamdebeasi 😊 i already looked into it and noticed the place where it probably is wrong, but my problem is, that i don't know how to debug the ionic core component on a real device. In browser i can easily by running the core module but how to on real device? 🤔

[liamdebeasi]

If you run npm run start in the core directory, it will start up a live reload server. From there the easiest thing to do is to use https://ngrok.com/ to setup a tunnel to whatever port Ionic Core is running at (usually it is port 3333). Ngrok will give you a URL that you can paste into your device to visit it.

[EinfachHans]

@liamdebeasi thx!! That helps me very much 😃 will look into this next week! ❤️

[EinfachHans]

@liamdebeasi - Thx again, with this help i was able to determine the underlaying bug. The scrollListenerCallback itself was correct, the error was the scrollEl's offsetHeight to be zero.

PR created: #22390

Would be great if you can include this in one of the upcoming bug-fixing releases 😊🎉

[liamdebeasi]

Thank you! I will take a look this week.