Ionic 4: Side menu (ion-menu) does not close properly in IOS

I am developing an application with IONIC 4 for android and IOS.

I add a side menu (ion-menu), it works perfectly on android.

But in IOS it is giving me problems, the menu opens perfectly. But when I want to close the menu. Graphically the menu closes, but when I try to interact with the application, only the options within the side menu are activated.

Only the side menu items are useful, the rest of the application is canceled.

This is the process.

Main page normally:

I open the side menu:

I close the menu:

All this options gets blocked:

But this options still are activated, even though the menu has been hidden.

This only happen in IOS, my specifications:

My code:

<ion-menu side="start" content-id="main-content">
      <ion-header class="headermenu">
            <div class="spacioemenuleft">


            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:center;">

                <img alt="logo" style="width:18.9vw; height:10.6vh; border-radius: 50%;"   src="{{pictureusuariomenu}}" >
                </div>  </div>  </div>
            </div>
            <div class="spacioemenuright">
            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">


                <div class="textsaldo2" [innerHTML]="fullname"></div>
                <div class="bloque">

                <div style="float:left; width:70%; height:100%" class="textsaldo2"> 

                <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:center;">

                PIN: {{pinusuario}}
                </div>  </div>  </div>



                </div>
                <div style="float:right; width:30%; height:100%; background-color:white;" (click)="copyText()"> 
                    <img alt="logo" style="width:100%; height:100%"   src="assets/imgs/compartir-b.png" >
                </div>





                </div>
                    <span class="error ion-padding" style="color:white; font-weight:bold;  margin-top:1em; padding-top:0em;" *ngIf="registrado">
            PIN COPIADO!!!
                </span>

                </div>
</div>
            </div>


      </ion-header>
      <ion-content >


      <div class="ion-padding">
      <div class="espacio2 margenboton" routerLink="/recargarsaldo">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:center;">

                Recargar Saldo
            </div>  </div>  </div>
        </div>  



        <ion-list>
          <ion-item>

            <div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/profile">
            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/perfil.png" >

            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/profile">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Mi perfil
        </div>  </div>  </div>  
            </div>


          </ion-item>
          <ion-item>

           <div style="float:left; width:20%; height:100%;  padding:0.8em;" routerLink="/notificaciones">

            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/11notificaciones.png" >
            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/notificaciones">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Notificaciones
        </div>  </div>  </div>  
            </div>


          </ion-item>
          <ion-item>

               <div style="float:left; width:20%; height:100%;padding:0.8em;" routerLink="/misretiros" >


            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/6dolares.png" >
            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/misretiros">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Mis retiros
        </div>  </div>  </div>  
            </div>



          </ion-item>
          <ion-item>

               <div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/historial">

            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/11historial.png" >
            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/historial">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Historial
        </div>  </div>  </div>  
            </div>

          </ion-item>

                  <ion-item>


   <div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/contacto">

            <img alt="logo"  style="width:2.7vh; height:2.7vh;"  src="assets/imgs/contact5.png" >

            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/contacto">

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:left;">

            Contáctanos
        </div>  </div>  </div>  
            </div>         


         </ion-item>

        <ion-item>

            <div style="float:left; width:20%; height:100%;  padding:0.8em;">
                    <img alt="logo"  style="width:2.7vh; height:2.6vh;"  src="assets/imgs/7cerrar.png" >

            </div>
            <div style="float:left; width:80%; height:100%;" class="textblue2">

            <div style="display:table;width:100%;height:100%;">
                <div style="display:table-cell;vertical-align:middle;">
                <div style="text-align:left;" (click)="cerrarsession();"  >

                    Cerrar sesión
                    </div>  </div>  </div>  
            </div>


        </ion-item>



       </ion-list>

      </div>
       <div style="height: 15vh; background-color:#F3F3F3; padding:0.2em;">

        <div style="display:table;width:100%;height:100%;">
                <div style="display:table-cell;vertical-align:middle;">
                <div style="text-align:center;"  >


                <div style="float:left; width:40%; height:100%;" >

            <div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:right;">

            <p class="textblue2" style="font-weight:bold;">En alianza con:</p>  
        </div>  </div>  </div>  
            </div>


                    <div style="float:left; width:60%; height:100%; padding:0.1em;     padding-top: 0.6em;" >
            <img alt="logo" style="width:80%; height:auto"   src="assets/imgs/Grupo517.png" >


            </div>



        </div>  </div>  </div>



       </div>


      </ion-content>

</ion-menu>

Any ideas?

1 post - 1 participant

Read full topic