I'm seeing an issue where ion-refresher
fires whenever I scroll down, even when the content isn't at the very top. This only happens when the page uses ion-segment-view
. If I remove ion-segment-view
, the refresher behaves correctlyโbut I lose important functionality, so that's not a real solution. I'm trying to understand the root cause.
So the actual behavior is: Refresher activates on any downward scroll.
Expected Behavior: Refresher should only activate when pulling from the very top of the content.
Steps to Reproduce:
- Open a page that includes
ion-refresher
together withion-segment-view
. - Scroll vertically from anywhere in the page (not at the very top).
- The refresher activates.
This is the minimal code to reproduce the problem:
home.page.html
:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-refresher slot="fixed" (ionRefresh)="refreshRecipes($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-segment>
<ion-segment-button value="first" content-id="first">
<ion-label>First</ion-label>
</ion-segment-button>
<ion-segment-button value="second" content-id="second">
<ion-label>Second</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment-view>
<ion-segment-content id="first">
@for (i of [].constructor(50); track $index) {
<div>Random string {{ $index + 1 }}</div>
}
</ion-segment-content>
<ion-segment-content id="second">Second</ion-segment-content>
</ion-segment-view>
</ion-content>
home.page.ts:
import { Component } from '@angular/core';
import {
...
} from '@ionic/angular/standalone';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonLabel, IonRefresher, IonRefresherContent, IonSegmentView, IonSegmentContent],
})
export class HomePage {
constructor() {}
refreshRecipes($event: any) {
setTimeout(() => ($event.target.complete()), 1000);
}
}
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (C:\Users\aless\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 8.7.3
@angular-devkit/build-angular : 20.2.0
@angular-devkit/schematics : 20.2.0
@angular/cli : 20.2.0
@ionic/angular-toolkit : 12.3.0
Capacitor:
Capacitor CLI : 7.4.3
@capacitor/android : 7.4.3
@capacitor/core : 7.4.3
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v24.1.0 (D:\nodejs\node.exe)
npm : 11.3.0
OS : Windows 10