Ionic-framework: Slides with vertical direction breaks when screen orientation is changed

[ozexpert]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x (2.0.0, 2.0.1 tested)

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

when using ion-slides with direction="vertical" breaks when screen orientation changes. It's fine without direction="vertical" option.

Expected behavior:

After changing orientation, slides should adjust the inner content position to fit the screen.

Steps to reproduce:
https://forum.ionicframework.com/t/slides-with-orientation-change/79460/4

Related code:

<ion-slides #oneSlider *ngIf="getSettings().read === 'one'"
    direction="vertical"
    pager="true"
    paginationType="progress"
    zoom="true"
    [effect]="getSettings().effect"
    (ionSlideDidChange)="slideChange()"
    (click)="touchHelp()">
    <ion-slide *ngFor="let item of getItemList()" (swipe)="swipeEvent($event)" (press)="pressEvent($event)">
        <div class="home-content">
            {{ item }}
        </div>
    </ion-slide>
</ion-slides>

Other information:

https://forum.ionicframework.com/t/slides-with-orientation-change/79460/4

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

[ozexpert]

i had this working in RC3. but broken in 2.0.0 and 2.0.1.

[ozexpert]

@mhartington FYI.

[jgw96]

Hello, thanks for using Ionic! We will look into this.

[ozexpert]

@jgw96 any update on this?

[mhartington]

Hi, we will look at it when we get to it.
It's on our list of TODOs.

We will update you when we address it.
Please refrain from pinging 😄

[ozexpert]

it's been a year and still this seems a problem.

[HenriqueJRech]

+1

[HollyLiang]

I fixed this by modify node_modules/ionic-angular/components/slides/swiper/swiper.js
line: 285~288

if (typeof s.renderedHeight !== 'undefined') {
    // manually assign user height
    height = s.renderedHeight;
}

change to

if (typeof s.height !== 'undefined') {
    // manually assign user height
    height = s.height;
}

Not the best way, but this can fix problem temporary.

ionic angular version: 3.8.0

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/184