OMG! I think that you are right. I will try this out on the code as soon as I get a chance. Super pumped that we’ll finally be able to updated. Thank you!

Where the issue is in how Stencil manages the task queue, I am not aware of a good workaround currently other than staying on an older version of Ionic Framework. I am going to continue investigating a fix and will post an update here when I have more to share.

Hello! So we figured out what the issue is. While the issue is more visible now that we are using the async queue, the bug is not in Stencil/Framework.

I was able to reproduce this in React and Vue as well. The problem in Angular is that if you aren’t using trackBy, Angular has no way of giving elements in a list a stable identity. As a result, when you “refresh” the list, Angular destroys all of the DOM nodes and re-creates them, but since Stencil adds the styles in after the elements have been re-added to the DOM, the scroll position gets reset to the top since the ion-item dimensions have changed.

Note that that identifier you provide must not change. So in the demo app that was originally provided, the 'Field ' + i value should not be used as an identifier since that value will change. As a result, we recommend creating an object with a key that is the index in your for-loop and your value:

app.component.html

<ion-item *ngFor="let field of fields;trackBy:trackId">
    {{field.value}}
 </ion-item>

app.component.ts

trackId(index: number, fieldObject: any) {
  return fieldObject.id;
} 

We are going to note this in the docs since we think it is an import point to note. I will close this issue out when the docs have been released. Thanks!

edit: If you are using React and Vue, you would use the key prop and provide the identifier there.

Same problem here. Everything works fine with 5.6.7 on Chrome but on iOS it always scrolls to the top. Had to go back to 5.4.1, which works fine for me on iOS and Android (it’s a Capacitor app).

For Chrome and 5.6.7 to work I had to add scrollPositionRestoration: 'enabled', (it’s an Angular 11 app)

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      scrollPositionRestoration: 'enabled',
      useHash: true,
    })
  ],
  exports: [RouterModule]
})

Interestingly this option is not necessary with Ionic 5.4.1. It work’s fine without it Unfortunately this option does not help for iOS. Only a downgrade to Ionic 5.4.1 fixes the problem in my app.

@liamdebeasi Is there anyway to get this prioritized? I’ve been unable to update the version of Ionic I’m using for 6 months now. Are there any directions on how I could go about building a local version of the Ionic framework to attempt to debug this and submit a PR? Or should I just dive in? I’m not trying to be annoying or difficult. Sorry if it’s coming off that way, but this is a major issue for my clients application, which has a pretty significant App Store presence.

@NiklasMerz The thing that I don’t get is how we seem to be the only two people who are having this issue… The UX paradigm which causes this issue seems like a pretty common scenario. Indicator on a list item -> View Detail -> Remove Indicator on List Item. This is how every email application works.

There is no fix in the works at the moment. The issue seems to be in this commit: https://github.com/ionic-team/ionic-framework/commit/c83826aa733594cf8041e34d5b4832907d7bc530 But beyond that I have not been able to isolate anything else.

This bug still exists using any version of @ionic/core greater than 5.4.1, including the latest version (5.6.0).

This DOESN’T happen on the following:

• Chrome
• Brave
• Android Native App
• Edge

This DOES happen on the following:

• iOS Native
• Safari Desktop
• Firefox

In any case this is a huge UX issue for the iOS version of my app and it will continue to prevent me from being able to update until it’s resolved.

Alright, that’s what I though as well. I just have no idea how this works and how to isolate this issue. Let me know if I can help with something.

Thank you for your effort. I am a huge fan of your WebKit bug reports 😉.