Screens splitting vertically unintentionally

Ionic Framework
1

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.companion
Screenshot_20200618_123318_com.coroflo.companion1080×2240 289 KB
Screenshot_20200618_123326_com.coroflo.companion
Screenshot_20200618_123326_com.coroflo.companion1080×2240 290 KB

2

Hmm, the template/code you’ve provided is not really telling us the whole story.
Can you replicate the issue in a new project that has a similar setup?

3

Yeah, I was hoping someone had already seen similar behaviour. But I set up a new project in a similar fashion and started hoofing in some of the screen loading code. I managed to replicate the behaviour. But it wasn’t for the same reason. It was an error in the HTML (looking for an object I hadn’t copied into the code). Having seen this I realised I’d the error messages for the main app redirected to the database rather than logged locally. And of course I’d missed one.

Thanks for the nudge. The problem was a null object reference. It’s good to know that a vertically split screen can just be a intermittent logical error in the underlying code.