I am working on an app for work on both Mac and Windows machines.
I am using a *ngFor to loop through a list of menu items which have icons attached. I have placed a class on each individual menu item so I can style them.
Parent Component
<app-application-action class="side-nav__item" fxFlex *ngFor="let action of actions" [showTitle]=true
[action]="action">
</app-application-action>
Child Component (<app-application-action>)
<div fxLayout="row" fxFlex class="action-nav__icon-box" fxLayoutAlign="start center">
<div [ngSwitch]="IconType" fxFlex="nogrow">
<span fxFlex="nogrow" *ngSwitchCase="0" class="{{ Icon }}"></span>
<svg fxFlex="nogrow" *ngSwitchCase="1" class="action-nav__icon">
<use [attr.xlink:href]="Icon"></use>
</svg>
</div>
<div *ngIf="showTitle" fxFlex class="action-nav__title">
<span *ngIf="Count !== undefined" class="action-nav__notification">{{Count}}</span>
<span>{{Title}}</span>
</div>
</div>
Styles
.side-nav__item {
padding-bottom: .7rem;
}
.action-nav__icon {
width: 2.3rem;
}
This results in the below. First is Chrome/Vivaldi/FireFox/Edge, second is Safari & Opera. I.E has additional issues as I can't even open the material sidenav drawer (that is a separate issue).
Why are the styles not working correctly on Safari & IE? How can I make CSS rules that only come into affect on a chosen browser?
EDIT: I have found that the containing div has flexbox created by the flex-layout npm package. If I turn off display flex in Safari's css editor the menu looks the same as in Chrome. So now I need to understand how to fix this problem and it should work.
I can't create a Blitz because there is too much client info to take out.
