Modal forms buttons unclickable on iPhone

Hello,

How is the modal placed in the mdb-navbar component? You mean that only button responsible for displaying modal is inside mdb-navbar or did you place the whole modal code there as well?

Please provide full html code so we can debug this problem properly.

The modal code is outside. Here is the incriminated page

  <!-- Navbar brand -->
  <!-- L'img deve essere cambiata-->
  <mdb-navbar-brand [ngClass]="{'full-width':globals.mobile}">
    <span style="display: inline-flex; justify-content: space-between;"  [ngClass]="{'full-width':globals.mobile}">
      <a class="logo navbar-brand" routerLink="/homepage" routerLinkActive="active" style="width:230px; height:84px;">
      <img src="/assets/images/logo_consodata.png" class="img-fluid flex-center" style="width:230px; height:53px;"   [ngClass]="{'nav-margin-top-mobile':globals.mobile, 'mobile':globals.mobile}">
    </a>
    <button *ngIf="globals.mobile" class="textColorBlack navbar-button-max-height margin-right-16" type="button" (click)="clearForm();frameLogin.show();" size="sm" mdbBtn color="warning" mdbWavesEffect>
      <mdb-icon fas icon="user" mdbDropdownToggle></mdb-icon>
    </button></span>
  </mdb-navbar-brand>

  <!-- Collapsible content -->
  <links>

    <!-- Links -->

    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item" *ngIf="!globals.mobile">
        <a class="nav-link">
          <button class="textColorBlack" type="button" (click)="clearForm();frameLogin.show();" size="sm" mdbBtn color="warning" mdbWavesEffect>
            <mdb-icon fas icon="user" mdbDropdownToggle></mdb-icon>
            ACCESSO CLIENTI
          </button>
        </a>
      </li>
    </ul>
  </links>
  <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->






<div mdbModal #frameLogin="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Area Clienti</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frameLogin.hide();">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3" (keydown)="onKeyDown($event)">
        <div class="md-form mb-5">
          <i class="fas fa-user prefix grey-text"></i>
          <input type="text" [formControl]="username" placeholder="Username" class="form-control validate" mdbInput>
          <mdb-error *ngIf="(submitted && username.value == null) || (username.invalid && (username.dirty || username.touched))"> {{'header_public.warning_username' | translate}}</mdb-error>


        </div>

        <div class="md-form mb-4">
          <i class="fas fa-lock prefix grey-text"></i>
          <input type="password" [formControl]="password" placeholder="Password" class="form-control validate" mdbInput>
          <mdb-error *ngIf="(submitted && password.value == null) || (password.invalid && (password.dirty || password.touched))"> {{'header_public.warning_psw' | translate}}</mdb-error>
        </div>

        <div *ngIf="submitted && error!=''" class="d-flex justify-content-center">
          <span class="error-label">{{ error | translate}}</span>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <div *ngIf="!loading; else loader" [ngClass]="{'col-12 col-md-4': !isIE()}" class=" d-flex justify-content-center">
          <a class="nav-link">
            <button (click)="login();" class="textColorBlack"  size="sm" mdbBtn color="warning" mdbWavesEffect style="cursor:pointer; z-index: 99999999">
            {{'header_public.login' | translate}}
            </button>
          </a>
          <div *ngIf="submitted " class="invalid-feedback">
            {{'header_public.warning_username' | translate}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<ng-template #loader>
  <mdb-spinner class="px-5" spinnerType="small" spinnerColor="blue"></mdb-spinner>
</ng-template>

Thank you for the code. We tried to reproduce this problem on the devices you mentioned (both on safari and chrome), but without success. If it's possible please send a simple demo app in which this problem occurs to a.idzikowski@mdbootstrap.com. Maybe this bug is caused by some other styles/elements.

Same issue, works fine in android-chrome, doesn't work as expected in IOS both chrome and safari.