Angular MDN Pro – Safari Support

Hi Team,

I have Safari issue could not resolve, kindly provide your awesome support.

The navigator code is based on Chrome, but is not working properly on Safari.

Almost is not displayed as expectation.

here is the navi bar source code FYI. please let me know your need more information.

--------------header.component.html---------------------

<header>
<mdb-sidenav #sidenav position="top" class="fixed dcp-side-nav-bg" [fixed]="false">
<logo>
<li>
<div class="logo-wrapper waves-light" style="height:130px;">
<a href="#">
<img src="/assets/img/abc-logo.png" class="img-fluid flex-center">
</a>
</div>
</li>
</logo>
<links>
<li>
<ul class="social">
<li>
<a class="icons-sm fb-ic">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a class="icons-sm pin-ic">
<i class="fa fa-youtube-play"></i>
</a>
</li>
<li>
<a class="icons-sm gplus-ic">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a class="icons-sm tw-ic">
<i class="fa fa-twitter"></i>
</a>
</li>
</ul>
</li>
<li>
<form class="search-form waves-light" role="search" mdbWavesEffect>
<div class="md-form mt-0">
<input type="text" class="form-control mr-sm-2" placeholder="Keywords here...">
</div>
</form>
</li>
<li>
<ul class="collapsible collapsible-accordion">
<mdb-squeezebox [multiple]="false" aria-multiselectable="false">
<mdb-item class="no-collase" *ngIf="(auth.loggedIn | async)">
<mdb-item-head mdbWavesEffect>
<a href="#" class="waves-effect" routerLink="messageList" routerLinkActive="active" mdbWavesEffect>
<i class="fa fa-fw fa-commenting"></i>
{{'NAV.MESSAGE.TITLE' | translate}}
<span class="badge badge-pill red" *ngIf="unreadMsgCount != 0">{{unreadMsgCount}}</span>
</a>
</mdb-item-head>
<mdb-item-body></mdb-item-body>
</mdb-item>
<mdb-item class="no-collase" *ngIf="(auth.loggedIn | async)">
<mdb-item-head mdbWavesEffect>
<a href="#" class="waves-effect" routerLink="certificateList" routerLinkActive="active" mdbWavesEffect>
<i class="fa fa-fw fa-certificate"></i>
{{'NAV.SERVICE.CERTIFICATE' | translate}}
<span class="badge badge-pill purple" *ngIf="certificateCount != 0">{{certificateCount}}</span>
</a>
</mdb-item-head>
<mdb-item-body></mdb-item-body>
</mdb-item>
<mdb-item class="no-collase">
<mdb-item-head mdbWavesEffect *ngIf="(auth.loggedIn | async)">
<a href="#" class="waves-effect" routerLink="claimList" routerLinkActive="active" mdbWavesEffect>
<i class="fa fa-fw fa-jpy"></i> {{ 'NAV.CLAIMS.TITLE' | translate }}
</a>
</mdb-item-head>
<mdb-item-body>
</mdb-item-body>
</mdb-item>
<mdb-item class="no-collase" *ngIf="(auth.loggedIn | async)">
<mdb-item-head mdbWavesEffect>
<a href="#" class="waves-effect" routerLink="serviceList" routerLinkActive="active" mdbWavesEffect>
<i class="fa fa-fw fa-cogs"></i> {{ 'NAV.SERVICE.TITLE' | translate }}
</a>
</mdb-item-head>
<mdb-item-body>
</mdb-item-body>
</mdb-item>
<mdb-item class="no-collase">
<mdb-item-head mdbWavesEffect>
<!-- <i class="fa fa-fw fa-chevron-right"></i> {{ 'NAV.SUPPORT.TITLE' | translate }} -->
<a href="#" class="waves-effect" routerLink="callCenter" routerLinkActive="active" mdbWavesEffect>
<i class="fa fa-fw fa-phone-square"></i> {{ 'NAV.SUPPORT.CALL_CENTER' | translate }}
</a>
</mdb-item-head>
<mdb-item-body>
</mdb-item-body>
</mdb-item>
<mdb-item class="no-collase">
<mdb-item-head mdbWavesEffect>
<a href="#" class="waves-effect" routerLink="abcBot" routerLinkActive="active" mdbWavesEffect>
<i class="fa fa-fw fa-android"></i> {{ 'NAV.SUPPORT.ABC_BOT' | translate }}
</a>
</mdb-item-head>
<mdb-item-body>
</mdb-item-body>
</mdb-item>
<mdb-item class="no-collase">
<mdb-item-head mdbWavesEffect>
<a href="#" class="waves-effect" routerLink="productList" routerLinkActive="active" mdbWavesEffect>
<i class="fa fa-fw fa-user-circle"></i> {{ 'NAV.PRODUCT.TITLE' | translate }}
</a>
</mdb-item-head>
<mdb-item-body></mdb-item-body>
</mdb-item>
</mdb-squeezebox>
</ul>
</li>
</links>
<div class="sidenav-bg mask-strong"></div>
</mdb-sidenav>
<mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav primary-color lighten-1"
[containerInside]="false">
<navlinks class="navbar-container">
<div class="float-left">
<a (click)="sidenav.show()" class="button-collapse">
<i class="fa fa-bars"></i>
</a>
</div>
</navlinks>
<logo>
<div class="breadcrumbs breadcrumbs-hidden-nav breadcrumb-dn mr-auto">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="/assets/img/logo-abc.svg" style="height:40px;" alt="ABC">&nbsp;
<p style="font-size:20px">{{ 'NAV.TITLE' | translate }}</p>
</div>
</logo>
<navlinks>
<ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav ie-hidden-double-nav">
<li class="nav-item" routerLinkActive="active" *ngIf="!(auth.loggedIn | async)">
<a class="nav-link waves-light" mdbWavesEffect routerLink="home" routerLinkActive="active">
<i class="fa fa-home fa-lg"></i>
<span class="clearfix d-none d-sm-inline-block">{{ 'NAV.HOME' | translate }}</span>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item" routerLinkActive="active" *ngIf="(auth.loggedIn | async)">
<a class="nav-link waves-light" mdbWavesEffect routerLink="my-page" routerLinkActive="active">
<i class="fa fa-home fa-lg"></i>
<span class="clearfix d-none d-sm-inline-block"> {{ 'NAV.MYPAGE' | translate }}</span>
</a>
</li>
<li class="nav-item" routerLinkActive="active" *ngIf="(auth.loggedIn | async)">
<a class="nav-link waves-light" mdbWavesEffect routerLink="messageList" routerLinkActive="active">
<i class="fa fa-comments-o fa-lg"></i>
<span class="clearfix d-none d-sm-inline-block"> {{ 'NAV.MESSAGE.TITLE' | translate }}</span>
<span class="badge badge-pill red" *ngIf="unreadMsgCount !=0">{{unreadMsgCount}}</span>
</a>
</li>
<li class="nav-item dropdown" dropdown>
<a type="button" class="nav-link dropdown-toggle waves-light" dropdownToggle mdbWavesEffect>
<i class="fa fa-globe fa-lg"></i>
<span class="clearfix d-none d-sm-inline-block"> {{ 'NAV.LANGUAGE' | translate }}</span>
<span class="caret"></span>
</a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-secondary" role="menu">
<a class="dropdown-item waves-light" mdbWavesEffect (click)="changeLanguage( 'jp')">日本語</a>
<a class="dropdown-item waves-light" mdbWavesEffect (click)="changeLanguage( 'en')">English</a>
</div>
</li>
<li class="nav-item avatar dropdown" dropdown routerLinkActive="active" *ngIf="(auth.loggedIn | async)">
<a class="nav-link dropdown-toggle waves-light" dropdownToggle mdbWavesEffect>
<img src="/assets/img/profile.png" class="img-fluid
rounded-circle z-depth-0">
</a>
<!-- <span class="clearfix d-none d-md-inline-block small">保険太郎</span> -->
<div *dropdownMenu class="dropdown-menu dropdown dropdown-secondary">
<a class="dropdown-item waves-light" mdbWavesEffect routerLink="profile" routerLinkActive="active">
<i class="fa fa-user fa-lg" aria-hidden="true"></i> {{ 'NAV.ACCOUNT.PROFILE' | translate }}</a>
<a class="dropdown-item waves-light" mdbWavesEffect routerLink="preference">
<i class="fa fa-heart fa-lg" aria-hidden="true"></i> {{ 'NAV.ACCOUNT.PREFERENCE' | translate }}</a>
<div class="divider dropdown-divider"></div>
<!-- <a class="dropdown-item waves-light" mdbWavesEffect routerLink="forgotPassword">
<i class="fa fa-key fa-lg" aria-hidden="true"></i> {{ 'NAV.ACCOUNT.FORGOT_PASSWORD' | translate }}</a> -->
<a class="dropdown-item waves-light" mdbWavesEffect routerLink="changePassword">
<i class="fa fa-pencil fa-lg" aria-hidden="true"></i> {{ 'NAV.ACCOUNT.CHANGE_PASSWORD' | translate }}</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item waves-light" mdbWavesEffect (click)="onLogout()">
<i class="fa fa-sign-out fa-lg"></i> {{ 'NAV.ACCOUNT.LOGOUT' | translate }}</a>
</div>
</li>
<li class="nav-item" *ngIf="!(auth.loggedIn | async)">
<a class="btn btn-sm peach-gradient waves-light" mdbWavesEffect data-wow-delay="0.6s" routerLink="login">
<i class="fa fa-sign-in fa-lg"></i> {{ 'NAV.ACCOUNT.LOGIN' | translate }}
</a>
</li>
<li class="nav-item" *ngIf="(auth.loggedIn | async)">
<a class="nav-link waves-light white-text waves-effect waves-light" (click)="toggleFullscreen()">
<span *ngIf="!isFullscreen">
<i class="fa fa-arrows-alt"></i>
</span>
<span *ngIf="isFullscreen">
<i class="fa fa-arrows-alt"></i>
</span>
</a>
</li>
<li class="nav-item" *ngIf="(auth.loggedIn | async)">
<a class="nav-link waves-light white-text waves-effect waves-light" (click)="style.show()
" mdbWavesEffect data-toggle="modal" data-target="#fluidModalRightWarn">
<i class="fa fa-ellipsis-v fa-lg mr-2" aria-hidden="true"></i>
</a>
</li>
</ul>
</navlinks>
</mdb-navbar>
</header>
<div class="fixed-action-btn" style="bottom: 30px; right: 20px;">
<a class="btn-floating btn-large pink waves-effec waves-light" mdbWavesEffect (click)="fixed.toggle($event)">
<i class="fa fa-paper-plane"></i>
</a>
<div class="fixed_collapse" [mdbCollapse]="isCollapsed" #fixed="bs-collapse">
<a class="btn-floating purple waves-light" routerLink="claimFnolNew" (click)="fixed.toggle($event)" mdbWavesEffect>
<i class="fa fa-phone-square"></i>
</a>
<a class="btn-floating orange darken-1 waves-light" *ngIf="(auth.loggedIn | async)" routerLink="serviceList" (click)="fixed.toggle($event)"
mdbWavesEffect>
<i class="fa fa-cogs fa-lg"></i>
</a>
<a class="btn-floating green waves-light" *ngIf="(auth.loggedIn | async)" routerLink="messageList" (click)="fixed.toggle($event)"
mdbWavesEffect>
<i class="fa fa-envelope fa-lg"></i>
</a>
<a class="btn-floating blue waves-light" routerLink="" (click)="fixed.toggle($event)" mdbWavesEffect>
<i class="fa fa-shopping-cart fa-lg"></i>
</a>
</div>
</div>
<div mdbModal #style="mdb-modal" class="modal fade right" id="fluidModalRightWarn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="heading lead">to be extended。。。</p>
<button type="button" class="close animated rotateIn" data-dismiss="modal" aria-label="Close" (click)="style.hide()">
<span aria-hidden="true" class="white-text">&times;</span>
</button>
</div>
<div class="text-left">
<ul class="list-group z-depth-0">
<li class="list-group-item justify-content-between">
Some Number/Total Number
<span class="badge badge-indigo badge-pill">5</span> /
<span class="badge badge-red badge-pill">10</span>
</li>
<li class="list-group-item justify-content-between">
Some Number
<span class="badge badge-pink badge-pill">3</span>
</li>
<li class="list-group-item justify-content-between">
Some Number
<span class="badge badge-pink badge-pill">3</span>
</li>
</ul>
</div>
<div class="modal-body">
<!-- <div class="text-left">
<i class="fa fa-gear fa-lg mb-3 animated fadeIn"></i>Overview
</div> -->
<div class="d-flex justify-content-center">
<a type="button" class="btn btn-success waves-light" mdbWavesEffect (click)="showLoadOneLayer()">Add Resource
<i class="fa fa-plus ml-1"></i>
</a>
<a type="button" class="btn btn-success waves-light" mdbWavesEffect (click)="showBulkLoadLayer()">Bulk Upload
<i class="fa fa-plus-circle ml-1"></i>
</a>
</div>
<hr>
<div class="text-left" *ngIf="showLoadOne">
<form>
<div class="md-form">
<i class="fa fa-user prefix"></i>
<input mdbActive type="email" class="form-control" id="form1" name="email" mdbInputValidate>
<label class="active" for="form1">some field</label>
</div>
<div class="md-form">
<i class="fa fa-address-book prefix"></i>
<input mdbActive type="text" class="form-control" id="form2" name="a" mdbInputValidate>
<label class="active" for="form2">some field</label>
</div>
<div class="md-form">
<i class="fa fa-code prefix"></i>
<input mdbActive type="text" class="form-control" id="form3" name="b" mdbInputValidate>
<label class="active" for="form3">some field</label>
</div>
<div class="md-form">
<i class="fa fa-building-o prefix"></i>
<input mdbActive type="text" class="form-control" id="form4" name="c" mdbInputValidate>
<label class="active" for="form4">some field</label>
</div>
<div class="md-form">
<i class="fa fa-user-plus prefix"></i>
<input mdbActive type="text" class="form-control" id="form5" name="d" mdbInputValidate>
<label class="active" for="form5">some field
</label>
</div>
<div class="row">
<i class="fa fa-user-certificate prefix"></i>
<div class="col-md-12 col-offset-2">
<mdb-select [options]="optionsSelect" [multiple]="true" placeholder="Choose your option"></mdb-select>
<label>some field</label>
</div>
</div>
</form>
</div>
<div class="text-left" *ngIf="showBulkLoad">
<form>
<div class="row">
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-building-o prefix"></i>
<input mdbActive type="email" class="form-control" id="form19" name="email" mdbInputValidate>
<label class="active" for="form19">some field</label>
</div>
</div>
</div>
<div class="file-field">
<div class="btn btn-primary btn-sm waves-light" mdbWavesEffect>
<span>TBD</span>
<input type="file" mdbFileSelect (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text" placeholder="Upload your excel/csv file..." [value]="showFiles()">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-warning waves-light" mdbWavesEffect>OK
<i class="fa fa-check ml-1"></i>
</a>
<a type="button" class="btn btn-warning waves-light" mdbWavesEffect data-dismiss="modal" (click)="style.hide()">Cancel
<i class="fa fa-close ml-1"></i>
</a>
</div>
</div>
</div>
</div>

Best Regards,Michael