ionic-team / ionic-team/ionic-framework
bug: `IonRefresher` causes unwanted refresh at slightest scroll up/down
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 51
描述
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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.
https://github.com/user-attachments/assets/422bba19-55a0-4769-a44b-a87f35185ec4
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.
https://github.com/user-attachments/assets/cce327d7-36c8-418f-a446-b5aad39b3b09
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.
https://github.com/user-attachments/assets/ef743ab8-7c1a-4dc0-9475-449303ca704c
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.
https://github.com/user-attachments/assets/9c57599c-e7c1-4396-8366-2bcaad2ef41d
贡献指南
评估
这个 Issue 还没有评估数据。