0

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:

  1. Open a page that includes ion-refresher together with ion-segment-view.
  2. Scroll vertically from anywhere in the page (not at the very top).
  3. 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
2
  • did you try to put the ion-refresher within the ion-segment-content, so instead of setting a single refresher for all the segements, maybe you can set the refresher per segement, does that work? Commented Aug 30 at 10:45
  • Hi, I've just tried to put it inside ion-segment-content and also inside ion-segment-view. In both cases the refresher does not trigger at all. Commented Aug 31 at 20:38

0

Your Answer

By clicking โ€œPost Your Answerโ€, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.