[SOLVED] ion-slides showing below the content ionic 5

ion-slides showing below the content ionic 5

I'm using Ionic 5 here, and iIve noticed that when I have a number of items in a list in the slide on ion-slide 1, and a few in the next ion-slide, when I transition between the two programatically, the slide with fewer items in starts way below the actual content it holds.

It's like the slides share a Y scroll position during the transition.

The slides, two of them, populated with some ion-items ( and sliding items ) nested inside an ion-list, they are "swiped" by the interactions with the ion-segment-buttons.

Is there a way to either scroll to the top of the next slide rapidly so that it's not noticed during the transition, or, someother code voodoo I need to add to stop slide 2 from starting at the Y point that slide 1 transitions from..

edit: a github repo of the code in action, scroll to the bottom of the long list, then click Group2 and the next slide starts from the same Y point as the previous.

https://github.com/p4u1d34n/ionicEmpty

<ion-slides #slider class="swiper-no-swiping">

    <ion-slide>
        <ion-list>
            <ion-item-sliding *ngFor="let item of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; let i = index">
                <ion-item (click)="doSomething(item)">
                    <ion-avatar slot="start">
                        <img src="image.png">
                    </ion-avatar>
                    <ion-label>
                        <h2>Title for item</h2>
                        <h3>Another line here</h3>
                        <p class="ion-text-wrap">
                            Some random stuff here
                        </p>
                    </ion-label>
                </ion-item>
                <ion-item-options side="end">
                    <ion-item-option color="danger" (click)="removeAction(item)">
                        Remove
                    </ion-item-option>
                </ion-item-options>
            </ion-item-sliding>
        </ion-list>
    </ion-slide>

    <ion-slide>
        <ion-list>
            <ion-item-sliding *ngFor="let item of [0,1,2,3]; let i = index">
                <ion-item (click)="doSomething(item)">
                    <ion-avatar slot="start">
                        <img src="image.png">
                    </ion-avatar>
                    <ion-label>
                        <h2>Title for different item</h2>
                        <h3>Another line here</h3>
                        <p class="ion-text-wrap">
                            Some random stuff here
                        </p>
                    </ion-label>
                </ion-item>
                <ion-item-options side="end">
                    <ion-item-option color="danger" (click)="removeAction(item)">
                        Remove
                    </ion-item-option>
                </ion-item-options>
            </ion-item-sliding>
        </ion-list>
    </ion-slide>

<ion-slides>

<ion-segment (ionChange)="changeSegment($event)" [value]="this.sliderindex">
    <ion-segment-button *ngFor="let seg of this.sliderindex" [value]="seg">
        <ion-label>{{seg}}</ion-label>
    </ion-segment-button>
</ion-segment>

declare var window;

@ViewChild('slider',{static:false}) slider:IonSlides;

private view: any;
public sliderindex:any = ['Group1','Group2'];

changeSegment(ev: any) {
        
    this.view = this.sliderindex.indexOf(ev.detail.value);
    this.slider.slideTo(this.view,250).then(()=>{

      <!-- Trying to get experimental here...  -->
      <!--   window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
        }); -->

    });
}

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
  <base href="/" />
  <meta name="color-scheme" content="light dark" />
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
  <script type="text/javascript" src="assets/js/cdlutils.js"></script>
  <script type="text/javascript" src="assets/js/cdl-utils-ui.js"></script>
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
  <app-root></app-root>
</body>
</html>

Solution

I need to add these bits..

import { IonContent } from '@ionic/angular';

@ViewChild(IonContent) content: IonContent;

and change the function to this

changeSegment(ev: any) {
    this.view = this.sliderindex.indexOf(ev.detail.value);
    this.slider.slideTo(this.view,250).then(()=>{
      this.content.scrollToTop(0)
    });
}