bug: Refresher is not visible in CDK virtual scroll list with multiple instances

[WillooWisp]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Refresher only works, gets visible, on active page upon reload.

Expected Behavior

Expects refresher to be visible on every page upon refresh, even if not active page upon refresh.

Steps to Reproduce

Use the tabs sample. Add a cdk virtual scroll list with refresher to each single tab page. Refresher only works on one of the pages, the one being active upon refresh in browser.

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-bat2vm

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.9
@angular-devkit/build-angular : 14.0.1
@angular-devkit/schematics : 13.3.5
@angular/cli : 14.0.1
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : 3.5.1

Utility:

cordova-res : 0.15.2
native-run : 1.5.0

System:

NodeJS : v14.17.5 (C:\Program Files\nodejs\node.exe)
npm : 7.22.0
OS : Windows 10

Additional Information

This issue #25318 solved the problem where the refresher got visible too often, not sure if this bug fix actually causes this new problem.

[TimGels]

I also noticed this. For me the refresher has this issue in iOS mode where the refresher isnt visible on the second (or any other aside from the first loaded) page I try to use the refresher. It does fire the refresh event but the animation is not visible. On md mode the refresher appears to be working for me on all my pages.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[WillooWisp]

Here is a sample reproducing the problem, https://stackblitz.com/edit/ionic6-angular13-bat2vm.
Make sure to toggle device toolbar, device view, and select an Android device for example. Refresh now only shows up for the view that was visible, active route, upon refresh.

[sean-perkins]

@WillooWisp thanks for the reproduction. The refresher appears to be attaching to the scroll events from the ionRefresh event firing, but the element is not visible.

I'm not exactly sure why multiple instances would effect the refresher's visibility, but we can capture as a bug and investigate in an upcoming sprint.

[WillooWisp]

Any progress solving this?

[sean-perkins]

We are in active 6.2 feature development, this bug has not been prioritized in our backlog yet.

Would gladly welcome further debugging from the community or a PR if someone identifies the problematic code and has a proposed resolution.

[sean-perkins]

Hello @WillooWisp!

Can you test with this dev-build and let me know if you run into any issues?

6.2.2-dev.11660183625.1a3e60c7

[WillooWisp]

@sean-perkins looks very promising so far!

[WillooWisp]

@sean-perkins it works in browser on desktop, but not on actual Android device, all refresher are rendered completely black and not visible.

[sean-perkins]

@WillooWisp can you share more about your environment?

I tested with this dev-build: 6.2.4-dev.11660836281.1a11712b due to this issue: #25782

On emulator with a Pixel 5 (API 32), pull to refresh works as expected with no black/invisible state.

[WillooWisp]

@sean-perkins tested again now, with 6.2.3 and it works in dark mode I saw now, but the incorrect look is shown in light mode.