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;