Hi Ionic community,
When I add ion-menu with on-router-outlet, my principal page is freezing in ios device ios 14. I can’t scroll and I can’t click on item.
Thank you for your help
Can you post your implementation of the ion-menu? Also if there are any errors…
<ion-header *ngIf="!showModal && !showModalCreateGroupe && !showModalCreateContact && !showInfoGroup">
<ion-toolbar color="default">
<ion-buttons slot="start">
<ion-menu-button color="light" autoHide="false"(click)="triggerSlideMenu()"></ion-menu-button>
</ion-buttons>
<ion-buttons *ngIf="!displaySearchBar" slot="start">
<ion-button (click)="home()">
<ion-icon slot="icon-only" src="assets/home.svg"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title *ngIf="(!inContactName || inContactName == '') && (!inGroupName || inGroupName == '') && !displaySearchBar" >Focus</ion-title>
<ion-title *ngIf="inContactName && inContactName != '' && !displaySearchBar"> {{ inContactName }}</ion-title>
<ion-title *ngIf="inGroupName && inGroupName != '' && !displaySearchBar">{{inGroupName}}</ion-title>
<ion-searchbar *ngIf="displaySearchBar" mode="ios" placeholder=" Rechercher..." [(ngModel)]="word" (ionChange)="searchPost()"></ion-searchbar>
<ion-buttons *ngIf="displaySearchBar" color="light" size="small" slot="end" (click)="cancelSearchPoste()">Annuler</ion-buttons>
<ion-buttons *ngIf="!displaySearchBar" slot="end" (click)="searchPost()">
<ion-button>
<ion-icon color="light" slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<app-post *ngFor="let post of posts; let i = index" [indexOfPost]="i" [EmmetName]="post.emmetName"
[EmmetPhone]="post.emmetPhone" [Text]="post.texte" [id]="post.idPostEmet"
[destinataires]="post.destinataires" [groups]="post.groups" [dateCreation]="post.dateCreation"
[cmtnonlu]="post.cmtnonlu" [visited]="post.visited"
[post]="post" [contacts]="contacts" (showInfoGroupEvent)="clickInfoGroupe($event)" ></app-post>
</ion-content>
<div class="newMessageContainer" *ngIf="!showModal && !showModalCreateGroupe && !showModalCreateContact && !showInfoGroup">
<button class="newMessageMobile clickable" (click)="newMessage()">
<ion-icon slot="start" color="light" size="large" name="create-outline"></ion-icon>
</button>
</div>
<div *ngIf="showModal" class="custom_envoi_message_modal">
<app-envoi-message [contacts]=contacts [groupsName]=groupsName [userSession]=userSession (closeWithoutSending)="closeWithoutSending()">
</app-envoi-message>
</div>
<div *ngIf="showModalCreateContact" class="custom_envoi_message_modal" swipeToClose={true}>
<ion-header>
<ion-toolbar color="default">
<ion-buttons slot="start" (click)="closeCreateContact()">
<ion-back-button color="light" defaultHref="home" ></ion-back-button>
</ion-buttons>
<ion-title slot='start'>Nouveau contact </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list-header lines="full">
<ion-label>
Ajouter un contact
</ion-label>
</ion-list-header>
<ion-list lines="full" class="ion-no-margin">
<ion-item>
<ion-input type="text" placeholder="Nom" [(ngModel)]="contactName"></ion-input>
<h2 *ngIf="!emptyName">/!\ Entrer un nom</h2>
</ion-item>
<ion-item>
<ion-input type="text" placeholder="Téléphone" [(ngModel)]="contactPhone"></ion-input>
<h2 *ngIf="!emptyPhone">/!\ Entrer un numéro de téléphone</h2>
</ion-item>
</ion-list>
<ion-button color="blue" expand="full" (keyup.enter)="ModalCreateContact()" (click)="ModalCreateContact()" fill="outline">Créer contact</ion-button>
</ion-content>
</div>
<div *ngIf="showModalCreateGroupe" class="custom_envoi_message_modal" swipeToClose={true}>
<ion-app>
<ion-header>
<ion-toolbar color="default">
<ion-buttons slot="start" (click)="closeCreateGroupe()">
<ion-back-button color="light" defaultHref="home" ></ion-back-button>
</ion-buttons>
<ion-title slot='start'>Nouveau groupe </ion-title>
</ion-toolbar>
</ion-header>
<ion-content slot="fixed" scrollY=false fullscreen>
<ion-list-header lines="full">
<ion-label>
Créer un nouveau groupe
</ion-label>
</ion-list-header>
<ion-item>
<ion-input type="text" placeholder="Nommer le groupe" [(ngModel)]="groupeName"></ion-input>
<h2 *ngIf="!emptyGroupeName">/!\ Entrer un nom</h2>
</ion-item>
<ion-list class="listOfContactsNewGroupe blackNormalFont">
<app-contact (contactEventEmitter)="onCheckContact($event)"
*ngFor="let contact of contacts; let i = index"
[indexOfContact]="i"
[contactName] ="contact.name"
[contact]="contact"
[isMenu] ="false">
</app-contact>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-button color="blue" expand="full" (click)="ModalCreateGroupe()" fill="outline">Créer groupe</ion-button>
</ion-toolbar>
</ion-footer>
</ion-app>
</div>
<!--*ngIf="menuTrigger"-->
<ion-menu menuId="main-menu" content-id="main" *ngIf="menuTrigger">
<ion-header>
<ion-toolbar>
<ion-buttons class="yuyuGreen" slot="start">
<ion-menu-button color="light" autoHide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons class="yuyuGreen" slot="start">
<ion-button (click)="home()">
<ion-icon slot="icon-only" src="assets/home.svg"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title class="yuyuGreen">Focus</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ParentSideBar" scrollY=false fullscreen>
<div class="contactsLabelMobile">
<ion-buttons *ngIf="!displaySearchBarGroupe" slot="start" (click)="searchGroupe()">
<ion-button>
<ion-icon color="dark" slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-list-header *ngIf="!displaySearchBarGroupe">Groupes </ion-list-header>
<ion-icon *ngIf="!displaySearchBarGroupe" name="add" (click)="ModalCreateGroupe()" size="large"></ion-icon> <!-- -->
<ion-searchbar *ngIf="displaySearchBarGroupe" placeholder="Groupes" [(ngModel)]="wordGroupe" (ionChange)="searchGroupe()"></ion-searchbar>
<ion-buttons *ngIf="displaySearchBarGroupe" size="small" slot="end" (click)="cancelSearchGroupe()">Annuler</ion-buttons>
</div>
<div class="noGroupe" *ngIf="groups.length == 0">
<ion-label class="labelInformation">Vous n'avez aucun groupe</ion-label>
<ion-button color="light" (click)="ModalCreateGroupe()">Créer</ion-button>
</div>
<ion-list class="listOfGroupesMenu blackNormalFont" *ngIf="groups.length != 0">
<app-groupe (groupEventEmitter)="selectGroup($event)" *ngFor="let group of groups; let i = index"
[indexOfGroup]="i" [groupName]="group.nameGroupe" [group]="group" [isMenu]="true">
</app-groupe>
</ion-list>
<div class="contactsLabelMobile">
<ion-buttons *ngIf="!displaySearchBarContact" slot="start" (click)="searchContact()">
<ion-button>
<ion-icon color="dark" slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-list-header *ngIf="!displaySearchBarContact"> Contacts </ion-list-header>
<ion-icon *ngIf="!displaySearchBarContact" name="add" (click)="ModalCreateContact()" size="large"></ion-icon>
<ion-searchbar *ngIf="displaySearchBarContact" placeholder="Contacts" [(ngModel)]="wordContact" (ionChange)="searchContact()"></ion-searchbar>
<ion-buttons *ngIf="displaySearchBarContact" size="small" slot="end" (click)="cancelSearchContact()">Annuler</ion-buttons>
</div>
<ion-list class="listOfContactsMenu blackNormalFont">
<app-contact (contactEventEmitter)="selectContact($event)" *ngFor="let contact of emetteurRecent; let i = index"
[indexOfContact]="i" [contactName]="contact.name" [contact]="contact" [isMenu]="true">
</app-contact>
</ion-list>
<div class="noContact" *ngIf="contacts.length == 1">
<ion-label class="labelInformation">Vous n'avez aucun contact</ion-label>
<ion-button color="light" (click)="ModalCreateContact()">Ajouter</ion-button>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet id="main"></ion-router-outlet>
<div *ngIf="showInfoGroup" class="custom_envoi_message_modal"swipeToClose={true}>
<app-info-group *ngIf="clickedGroupe != undefined" (closeInfoGroupe)="closeInfoGroupe()" [groupe] = clickedGroupe [participants] = clickedGroupe.participants [contacts] = "contacts">
</app-info-group>
</div>