Fixes Popup Angular Animation Overlap

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

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;
-    align-content: center;
-    align-items: center;
-    overflow-y: hidden;
-    position: fixed;
-    display: flex;
-    height: 100vh;
-    width: 100vw;
+    position: absolute;
+    width: 100%;
+    height: 100%;
     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 {