From 7c7a01f2ca171a95c12c55e9442c5e6d9780c696 Mon Sep 17 00:00:00 2001
From: Vitor Hideyoshi <vitor.h.n.batista@gmail.com>
Date: Wed, 8 Nov 2023 23:48:07 -0300
Subject: [PATCH] Fixes Popup Angular Animation Overlap

https://stackoverflow.com/questions/55122978/angular-7-animations-causes-z-index-overlapping-issue-on-webkit-browsers
---
 .../stack-slider/stack-slider.component.html   | 14 +++++---------
 .../components/popup/popup.component.css       | 18 +++++++++---------
 .../shared/components/popup/popup.component.ts |  2 ++
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/app/home/stack-slider/stack-slider.component.html b/src/app/home/stack-slider/stack-slider.component.html
index 98a4163..9967157 100644
--- a/src/app/home/stack-slider/stack-slider.component.html
+++ b/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>
-        <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>
+<ngx-glide #ngxGlide class="container stack-slider" *ngIf="stacks && stacks.length > 0">
+    <app-stack-card *ngFor="let stack of stacks" class="slider-card" [stack]="stack"
+        [inFocus]="isInFocus(stack)">
+    </app-stack-card>
+</ngx-glide>
diff --git a/src/app/shared/components/popup/popup.component.css b/src/app/shared/components/popup/popup.component.css
index 14fa8fa..8d3867c 100644
--- a/src/app/shared/components/popup/popup.component.css
+++ b/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 {
diff --git a/src/app/shared/components/popup/popup.component.ts b/src/app/shared/components/popup/popup.component.ts
index b7fee51..93d3539 100644
--- a/src/app/shared/components/popup/popup.component.ts
+++ b/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(