NeckbreakerPascal commented 3 years ago

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

liamdebeasi commented 3 years ago

Thanks for the issue. Your issue mentions a StackBlitz where I can see the issue happening, however I cannot find the link. Did you include it in the issue description?

NeckbreakerPascal commented 3 years ago

Thanks for the issue. Your issue mentions a StackBlitz where I can see the issue happening, however I cannot find the link. Did you include it in the issue description?

Thanks for the quick answer. I tried to create a Stackblitz but it did not work, I only found an ionic 4 version, no ionic 5 for stackblitz and the one I found ran into a scss issue.

liamdebeasi commented 3 years ago

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

NeckbreakerPascal commented 3 years ago

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.

NeckbreakerPascal commented 3 years ago

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

Hey there, I added you to the private repo: https://github.com/NeckbreakerPascal/ionic-app

There you can see the error on Tab Page 2, already in the browser with ionic serve. When you Refresh, the content is short time cuttet on the slide.

liamdebeasi commented 3 years ago

Thanks! I was able to reproduce this behavior, though it looks like this is a bug in Swiper, not Ionic Framework (Swiper is the library that powers ion-slides). When you pull to refresh, something causes Swiper to set the .swiper-wrapper class to have a height of ~198px, resulting in the content being cut off.

One thing you can do as a workaround is to add a class that forces the height to remain at 100% while the content is refreshing:

tab2.page.html

<ion-slides [ngClass]="{'refreshing' : refreshing}"></ion-slides>

global.scss

ion-slides.refreshing .swiper-wrapper {
  height: 100% !important;
}

You are welcome to file an issue with the Swiper author (https://github.com/nolimits4web/swiper) though they may ask for a code reproduction outside of Ionic Framework.

ionitron-bot[bot] commented 3 years ago

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.

ionic-team / ionic-framework

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

Bug Report