Fixes Popup Angular Animation Overlap

https://stackoverflow.com/questions/55122978/angular-7-animations-causes-z-index-overlapping-issue-on-webkit-browsers

src/app/home/stack-slider/stack-slider.component.html

@@ -1,9 +1,5 @@
-<ng-container class="container" *ngIf="stacks && stacks.length > 0">
+<ngx-glide #ngxGlide class="container stack-slider" *ngIf="stacks && stacks.length > 0">
-    <ngx-glide #ngxGlide>
+    <app-stack-card *ngFor="let stack of stacks" class="slider-card" [stack]="stack"
-        <ng-container *ngFor="let stack of stacks">
-            <app-stack-card class="slider-card" [stack]="stack"
         [inFocus]="isInFocus(stack)">
     </app-stack-card>
-        </ng-container>
 </ngx-glide>
-</ng-container>

src/app/shared/components/popup/popup.component.css

@@ -7,14 +7,9 @@
 
 .popup-background {
     background-color: rgba(0, 0, 0, 0.5);
-    justify-content: center;
+    position: absolute;
-    align-content: center;
+    width: 100%;
-    align-items: center;
+    height: 100%;
-    overflow-y: hidden;
-    position: fixed;
-    display: flex;
-    height: 100vh;
-    width: 100vw;
     left: 0;
     top: 0;
 }
@@ -25,10 +20,15 @@
     border: 1px solid #dddd;
     border-radius: 18px;
     height: fit-content;
-    position: relative;
     max-width: 400px;
     overflow: auto;
     width: 90%;
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+
+    transform: translate(-50%, -50%);
 }
 
 .popup-header {

src/app/shared/components/popup/popup.component.ts

@@ -27,12 +27,14 @@ import {
                 'hide',
                 style({
                     opacity: '0',
+                    zIndex: 2
                 }),
             ),
             state(
                 'show',
                 style({
                     opacity: '1',
+                    zIndex: 2
                 }),
             ),
             transition(