bug: angular: navigations that overlap a page transition can leave two pages visible

Aberta
  • Algo errado?
#31,650 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Ativa
Stack de tecnologia
angular, typescript
Domínio
frontend

Direção de pesquisa

Start in common/directives/navigation/stack-controller.ts, reading StackController.wait() and how runningTask is set and cleared; the issue already suggests tasks can resume concurrently via promise.finally(). Reproduce with the provided zoneless Angular app and the 8-navigation burst driver, checking visible .ion-page elements after settling. Done means overlapping navigations always settle with exactly one visible page matching the current URL, verified across repeated bursts.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

package: angular type: bug
Ionic Framework Version

v9.x (9.0.9)

Current Behavior

When router navigations follow each other faster than the page transition — a navigation starts while the previous transition is still animating — the outlet sometimes settles with two .ion-page elements displayed: the page for the current URL and a page from an earlier navigation.

In a headless Chromium run of the reproduction below (iOS mode, default transitions), 5 of 40 bursts of 8 navigations, 30–330 ms apart, ended with two pages visible.

From reading StackController.wait() (common/directives/navigation/stack-controller.ts): every task waiting on runningTask resumes at the same moment once it settles, and promise.finally(() => (this.runningTask = undefined)) can clear the slot while a later task is still running, so queued transitions can run at the same time rather than one after another. That does not seem to be the only path: with wait() changed locally to chain tasks strictly, 1 of 40 bursts still failed.

Expected Behavior

Once navigations settle, exactly one page is visible: the one for the current URL.

Steps to Reproduce
  1. A standalone Angular app with provideIonicAngular({ mode: 'ios' }), an <ion-router-outlet> and three sibling routes a, b, c, each a component with an <ion-content>.
  2. Call router.navigateByUrl() 8 times in a row to random routes among the three, 30–330 ms apart.
  3. Wait ~3 s and count the ion-router-outlet > .ion-page elements that are displayed with non-zero opacity.
const page = (name: string) => {
  @Component({ selector: `page-${name}`, template: `<ion-content>${name}</ion-content>`, imports: [IonContent] })
  class P {}
  return P;
};

@Component({ selector: 'app-root', template: '<ion-app><ion-router-outlet /></ion-app>', imports: [IonApp, IonRouterOutlet] })
class Root {}

bootstrapApplication(Root, {
  providers: [
    provideZonelessChangeDetection(),
    provideIonicAngular({ mode: 'ios' }),
    provideRouter([
      { path: 'a', component: page('a') },
      { path: 'b', component: page('b') },
      { path: 'c', component: page('c') },
      { path: '', redirectTo: 'a', pathMatch: 'full' },
    ]),
  ],
});

// Driver: navigate 8 times to random routes, 30–330 ms apart, then after ~3 s:
const visible = [...document.querySelectorAll('ion-router-outlet > .ion-page')]
  .filter((p) => getComputedStyle(p).display !== 'none' && +getComputedStyle(p).opacity > 0);
// Expected visible.length === 1; observed 2 in about 1 of 8 bursts.
Code Reproduction URL

Inline above.

Ionic Info

@ionic/angular 9.0.9, @ionic/core 9.0.9, @angular/core 22.2.3 (zoneless), Chromium via Playwright.

Additional Information

In our app this showed up as tab switches settling on a page that was not the tab in the URL after fast taps.

Linguagem predominante
TypeScript
Estrelas
52.7k
Forks
13.3k
Merge médio
2d 21h
PRs com merge (30d)
65

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de ionic-team/ionic-framework

Todas as issues de ionic-team/ionic-framework

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.