bug: ion-slides height is broken after changing data inside ion-content

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

• I already had these kind of problems with issue https://github.com/ionic-team/ionic-framework/issues/22962
• Because the issue is coming up again, in a different way I have to open this

First Problem:

• Start of the App, Init Data for an ion-slider (data comes from an API via HTTP Request)
• ion-content on Slider renders correct
• use ion Refresh, which calls again data from the API
• the slider calculates the height wrong and I do not see the whole content which got rendered before
• Important: inside the slider is an div with an*ngFor and that array got updated via the Refresh

new additional Problem:

• Start of the App, Init Data for an ion-slider (data comes from an API via HTTP Request)
• ion-content on Slider renders correct
• Change via ion-tab-bar to another page inside the app which also uses ion-slider
• First slider that is shown height is calculate wrong and it is cut, it also uses ngFor to render the content

Expected behavior:

• ion slider should calculate the correct height and not cut the content inside ion-content

Steps to reproduce:

• As far as I can see, you have to get Data via http from an external source, otherwise the problem das not occurs
• checkout the StackBlitz, where I tried to reproduce the overall construction

Related code:

For example, the content of the first slider…

   <ion-slides #SwipedTabsSlider
            [pager]="false"
            [options]="{autoHeight: true}">

<ion-slide>
    <div class="card-line">
        <h1>Slide 1</h1>
        <!-- Dynamic Content that comes via an API HTTP Request - the array as about 10 entries long -->
        <div *ngFor='let slide1Array of slide1Data?.message ; let i = index, let odd=odd; let even=even; '>
            <ion-card *ngIf="slide1Array.message=='test'">
                <ion-card-content>
                    <div *ngFor="let d of slide1Array.data">
                        <ion-grid no-padding>
                            <ion-row>
                                <ion-col size="12">
                                    <p>d.info</p>
                                </ion-col>
                            </ion-row>
                        </ion-grid>
                    </div>
                </ion-card-content>
            </ion-card>
        </div>

        <!-- Some Static Content -->
        <h1>Your Help is needed</h1>
        <ion-card class="card">
            <ion-card-content>
                <ion-grid>
                    <ion-row>
                        <ion-col>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. S
                                tet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. L
                                orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et a
                            </p>
                        </ion-col>
                    </ion-row>
                </ion-grid>

            </ion-card-content>

        </ion-card>

    </div>
</ion-slide>
</ion-slides>

Other information:

• I guess it has something to do with the http-request and the call order (Get API Data, re calculate Height of Slider, render via ngFor)
• I already tried to call the updateHeight function, which is part of the swiper-API, but it does not work properly, no matter where I call that method in the ionic life cycle.

Ionic info:

Ionic:

   Ionic CLI                     : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.4
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 30 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v14.15.4 (/usr/local/bin/node)
   npm        : 2.15.12
   OS         : macOS Big Sur
   Xcode      : Xcode 12.4 Build version 12D4e

[NeckbreakerPascal]

Can you reproduce this issue in an Ionic starter app and push it as a GitHub repo?

I will try that next week. 😃 Good idea! I guess on monday or tuesday.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.