Ionic2 iOS - trying to scroll one view scrolls a different view

Ionic Framework ionic-v3
1

Hello all!

I have this strange issue only when using iOS (actually haven’t tried Android, but windows works fine).

So I’m using Ionic2 with tabs. 2 of the tabs are basically just showing data that I’m pulling in from an API. When the first tab loads, I can scroll up and down perfectly fine. I switch to the next tab/view and that also loads and scrolls fine. Now I try to go back to the previous tab, and scrolling appears to be frozen. While the console showed absolutely no errors, I quickly found out that not only is this scrolling frozen, but it is actually scrolling the tab that I had just switched from instead (I see this by switching back to the previous tab and notice it scrolling from momentum).

I have captured this issue on a screen recording of my simulator here: https://youtu.be/8yKSf9m10W4

Again, works fine when doing “ionic serve”. Issue only exists on iOS.

Any help would be greatly appreciated!

2

Could you share the view’s code?

I’m using tabs and scrolls and it’s all just dandy on iOS

3

Oh of course. Sorry about that. This is the view that is getting stuck (Events)

<ion-navbar *navbar>
  <ion-title>
    Events
  </ion-title>
</ion-navbar>
<ion-content padding class="events">
  <ion-list>
      <ion-item *ngFor="let event of events">
          <ion-card>
              <ion-card-content>
                 {{event.startDayWeek}}, {{event.startMonth}} {{event.startDay}}th, {{event.startYear}}
              </ion-card-content>
          </ion-card>
      </ion-item>
  </ion-list>
</ion-content>

This below is the Podcast view that scrolls in the background. Its pretty much the same as the other, only its using the ionic-audio plugin.

<ion-navbar *navbar>
  <ion-title>podcast</ion-title>
</ion-navbar>

<ion-content padding class="podcast">
    <ion-list>
        <audio-track #audio *ngFor="let podcast of podcasts"  [track]="podcast" (onFinish)="onTrackFinished($event)">
          <ion-item>
            <ion-thumbnail item-left>
              <audio-track-play dark [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>
            </ion-thumbnail>
            <div item-content style="width:100%">
              <!-- <p><strong>{{podcast.title}}</strong> &#x26AC; <em>{{podcast.description}}</em></p> -->
              <audio-track-progress-bar duration progress [audioTrack]="audio"></audio-track-progress-bar>
              <em style="font-size:.5em">Track ID: {{audio.id}}</em>
            </div>
          </ion-item>
        </audio-track>
      </ion-list>
</ion-content>

EDIT:
It looks like either one can actually be “stuck”. It just depends on the order in which I open them.

4

Hmm, interesting indeed. Would you be able to provide a demo in either a github repo or pluknr?

Doesn’t have to be the complete app, but just some replication of the error.

5

Alright. I’m assuming since the issue seems to only exist when running on iOS that Plunker wouldn’t replicate the issue (I could be wrong, I’ve never used it).

So I’ve added just my app files to this github repo I spun up real quick. Let me know if this is enough.

Thank you!

6

Think you forgot a few things, cus the app folder is not enough. Package.json, etc

7

Oh wow sorry about that I updated the repo now.
Let me know if I’m still missing anything.

Thanks again

8

This is a bug in beta 10. An issue already exists for it in github

1 Like