From 0a4c3069dde50e389cdb21db44bfcca3b3cf19d0 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 30 Jan 2023 19:35:28 +0800
Subject: [PATCH] Fix this translateY making carousel jumpy

- It moves outside of the box
- Causes the container to have a vertical scrollbar
- When scrolling, it's moves up and down, causing the carousel to jump
- Don't quite understand why, maybe a super rare browser (Chrome) bug
---
 src/components/status.css | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index 2a488420..58e332aa 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -524,8 +524,9 @@
 }
 .carousel-item button.media-alt {
   position: absolute;
-  bottom: 16px;
-  bottom: calc(16px + env(safe-area-inset-bottom));
+  --bottom: 16px;
+  bottom: var(--bottom);
+  bottom: calc(var(--bottom) + env(safe-area-inset-bottom));
   left: 16px;
   left: calc(16px + env(safe-area-inset-left));
   text-align: left;
@@ -562,11 +563,13 @@
 }
 @media (hover: hover) {
   .carousel-item button.media-alt {
-    transform: translateY(200%);
-    transition: transform 0.2s ease-in-out;
+    opacity: 0;
+    transform: translateY(var(--bottom)) scale(0.95);
+    transition: all 0.2s ease-in-out;
   }
   .carousel-item:hover button.media-alt {
-    transform: translateY(0);
+    opacity: 1;
+    transform: translateY(0) scale(1);
   }
   .carousel-item button.media-alt[hidden] {
     opacity: 1;