bug: IonRefresher causes unwanted refresh at slightest scroll up/down

[davidalejandroaguilar]

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

v8.x

Current Behavior

Using IonRefresher with Swiper 2 basic segments and a toolbar rendering a basic IonCard (just title, description and the Swiper gallery) on iOS causes:

• View refreshes uncontrollably at the slightest scroll up or down the view.
• When managing to pull to refresh, it does so with flashes in a jarring manner.

The reproduction repo has:

• Non working code when using IonRefresher, Swiper and segments rendering a basic card.
• Working code by removing Swiper.
• "Working" code with Swiper and smaller image dimensions (flashes still happen).
• Non working code by removing segments.

Expected Behavior

Using IonRefresher with Swiper 2 basic segments and a toolbar rendering a basic IonCard (just title, description and the Swiper gallery) on iOS to:

• Be able to scroll up or down the view.
• Being able to pull down to refresh without having flashes of content.

Steps to Reproduce

The reproduction repo has the reproduction of:

• Non working code when using IonRefresher, Swiper and segments rendering a basic card.
• Working code by removing Swiper.
• "Working" code with Swiper and smaller image dimensions (flashes still happen).
• Non working code by removing segments.

Code Reproduction URL

https://github.com/davidalejandroaguilar/ionic-refresh-bug

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/david/.asdf/installs/nodejs/18.15.0/.npm/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.4.1

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : 6.2.0

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v18.15.0 (/Users/david/.asdf/installs/nodejs/18.15.0/bin/node)
npm : 9.5.0
OS : macOS Unknown

Additional Information

Description

This repository illustrates a bug in:

• @ionic/react 8.4.1
• swiper 11.2.0
• iOS 18.1.1

We have a basic sample code rendering a collection of places with the following data:

• Title
• Description
• Photos

It uses Swiper to display a swipeable gallery on a media card. It only uses Ionic components to create the card.

It also uses 2 basic segments and a toolbar.

The problem is that for some reason, if the card gets a bit too tall, refreshing the view on iOS causes the view to refresh at the slighest scroll up or down uncontrollably, and when you manage to refresh the view, the view flashes in a jarring manner.

It can be reproduced on the following commits:

1. 664270b - Non working code with Swiper

Here, the image has a 4/4 aspect ratio set with an image of size 600x400. The card gets a big too big and causes the behavior described above.

ScreenRecording_01-06-2025.9-02-45.p.m._1.1.mov

2. 0366fce - "Working" code with Swiper and smaller image dimensions

Here, the image has a 16/9 aspect ratio set with an image of size 600x400. The card gets a bit smaller and the uncontrollable refresh at the slighest scroll up or down is fixed, but you still get view flashes in a jarring manner when refreshing.

ScreenRecording_01-06-2025.9-41-22.p.m._1.1.mov

3. 16df9a4 - Working code without Swiper

Here, the image has a 4/4 aspect ratio set with an image of size 600x400. The card gets a big too big, but since Swiper is removed, the behavior described above does not happen anymore.

ScreenRecording_01-07-2025.9-03-25.a.m._1.1.mov

4. 8317cab - Non working code without segments

Here, the image has a 4/4 aspect ratio set with an image of size 600x400. The card gets a big too big, and even now with the segments removed, the behavior described above happens.

ScreenRecording_01-07-2025.9-06-52.a.m._1.1.mov