angular 2 custom dropdown directive not showing on iphone 6

Question

I have recently been working with Angular 2 to create a custom dropdown directive, appDropdown, that displays a list of service options in Spanish. My issue is that this directive displays correctly when I test it on my laptop and I shrink the screen so that the bootstrap collapse class takes effect. When I deploy my app to AWS and then try to test on my iphone 6 (version 10.3.3) the Espanol dropdown is not visible when clicked. The button highlights when its clicked but the menu is not visible. The menu items are there as if you click into the blank section of the screen where the menu items should be you are directed to the right router-outlet. I'm not sure if this is a css issue, bootstrap issue, or a directive issue associated with the iphone 6 and not not being able to see the dropdown menu even though it is clickable in the blank space under the dropdown button. Could you assist?

app.component.html

    <div class="collapse navbar-collapse" [ngClass]="{'in': isIn}" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a routerLink="/company" routerLinkActive="active">Our Company <span class="sr-only">(current)</span></a></li>
              <li><a routerLink="/translation" routerLinkActive="active">Translation Services <span class="sr-only">(current)</span></a></li>
              <li><a routerLink="/interpretation" routerLinkActive="active">Interpretation Services</a></li>
              <li><a routerLink="/localization" routerLinkActive="active">Website Localization Services</a></li>
              <li><a routerLink="/dialect" routerLinkActive="active">Spanish Dialects</a></li>
              <li><a routerLink="/contact" routerLinkActive="active">Contact Us</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" appDropdown>
              <!--<button class = "btn btn-default navbar-btn" (click) = "toggleLanguage()">Español</button> -->
              <button type="button" class="btn btn-default navbar-btn dropdown-toggle appDropdown" data-toggle="dropdown" role="button" id="language-toggler" aria-haspopup="true" aria-expanded="false" >
              Español <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" routerLink="/spanish-company" routerLinkActive="active">Nuestra Empresa</a></li>
                <li><a class="dropdown-item" routerLink="/spanish-translation" routerLinkActive="active">Servicios de Traducción</a></li>
                <li><a class="dropdown-item" routerLink="/spanish-interpretation" routerLinkActive="active">Servicios de Interpretación</a></li>
                <li><a class="dropdown-item" routerLink="/spanish-localization" routerLinkActive="active">Servicios de Localización de Página de Web</a></li>
                <li><a class="dropdown-item" routerLink="/spanish-dialect" routerLinkActive="active">Dialectos del Español</a></li>
                <li><a class="dropdown-item" routerLink="/spanish-contact" routerLinkActive="active">Contáctenos</a></li>
                <li><a class="dropdown-item" routerLink="/spanish-quote" routerLinkActive="active">Pida Una Cotización</a></li>
                 </ul>
          </div>

dropdown.directive.ts

    import { Directive, HostListener, HostBinding } from '@angular/core';

    @Directive({
        selector: '[appDropdown]'

    })

    export class DropdownDirective {
    @HostBinding('class.open') isOpen = false;


    @HostListener('click') toggleOpen() {

    this.isOpen = !this.isOpen;

    }
   }