Skip to content

bug: ion-refresher triggers while scrolling when used with ion-segment-view #30656

@Falco-A

Description

@Falco-A

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions