Screens splitting vertically unintentionally

I’m using @angular/router in an Ionic 5 project. It has both tabbed and side menu navigation. Recently navigating through the screens has resulted in vertical split loading. This is happening intermittently but regularly on both iOS 13.4.1 and multiple Android devices.

I’m suspect that it might have something to do with the move from UIWebView to WKWebView.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { FeedGuard } from './services/feed-guard.service';
import { AuthGuardService } from './services/auth-guard.service';

const routes: Routes = [
  { path: '', loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule),
                                canActivate: [AuthGuardService], canDeactivate: [FeedGuard] },
  { path: 'account', loadChildren: () => import('./pages/account/account.module').then(m => m.AccountPageModule) },
  { path: 'onboarding', loadChildren: () => import('./pages/onboarding/onboarding.module').then(m => m.OnboardingPageModule) },
  { path: 'settings', loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsPageModule) },
  { path: 'tabs', loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule),
                                canActivate: [AuthGuardService], canDeactivate: [FeedGuard] },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

The menu is pretty boilerplate:

        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item routerDirection="root" [routerLink]="[p.url]" class="coro-menu-item">
            <ion-icon class="coro-menu-icon" name="{{p.icon}}"></ion-icon>
            <div>
            <label class="ion-text-wrap coro-menu-title">{{p.title}}</label>
            <p class="ion-text-wrap coro-menu-subtitle">{{p.subTitle}}</p>
            </div>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

But switching between screens with the side menu leads to the screen splitting as in the images. I’m inclined to think it’s taking it’s width from the side menu as it closes rather than the screen it’s replacing.

Screenshot_20200618_123318_com.coroflo.companion1080×2240 289 KB

Screenshot_20200618_123326_com.coroflo.companion1080×2240 290 KB

2 posts - 2 participants

Read full topic