Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix this translateY making carousel jumpy

Browse source 
- 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
This commit is contained in:
Lim Chee Aun 2023-01-30 19:35:28 +08:00
parent 305bb92906
commit 0a4c3069dd
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/status.css
View file

@ -524,8 +524,9 @@
} }
.carousel-item button.media-alt { .carousel-item button.media-alt {
position: absolute; position: absolute;
bottom: 16px; --bottom: 16px;
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: var(--bottom);
bottom: calc(var(--bottom) + env(safe-area-inset-bottom));
left: 16px; left: 16px;
left: calc(16px + env(safe-area-inset-left)); left: calc(16px + env(safe-area-inset-left));
text-align: left; text-align: left;
@ -562,11 +563,13 @@
} }
@media (hover: hover) { @media (hover: hover) {
.carousel-item button.media-alt { .carousel-item button.media-alt {
transform: translateY(200%); opacity: 0;
transition: transform 0.2s ease-in-out; transform: translateY(var(--bottom)) scale(0.95);
transition: all 0.2s ease-in-out;
} }
.carousel-item:hover button.media-alt { .carousel-item:hover button.media-alt {
transform: translateY(0); opacity: 1;
transform: translateY(0) scale(1);
} }
.carousel-item button.media-alt[hidden] { .carousel-item button.media-alt[hidden] {
opacity: 1; opacity: 1;