From a21a93190edddc1d5ff01dcfbb1b82d6c9a3117e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 11 Jul 2026 11:10:49 +0900
Subject: [PATCH] Update MkImageGallery.item.vue

---
 .../src/components/MkImageGallery.item.vue    | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue
index f04db4f34d..3df74ed569 100644
--- a/packages/frontend/src/components/MkImageGallery.item.vue
+++ b/packages/frontend/src/components/MkImageGallery.item.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@transitionend.self="enableTransition = false"
 			@transitioncancel.self="enableTransition = false"
 		>
-			<div :class="$style.contentWrapper">
+			<div :class="[$style.contentWrapper, { [$style.hideForFallback]: hideForFallback }]">
 				<img
 					v-if="(!originalContentLoaded || !thumbnailContentLoaded) && (content.thumbnailUrl != null)"
 					:class="[$style.content, $style.thumbnail]"
@@ -148,6 +148,7 @@ const originalContentLoaded = ref(false);
 const thumbnailContentLoaded = ref(false);
 const enableTransition = ref(false);
 const infoShowing = ref(false);
+let canOpenAnimation = false;
 
 onMounted(() => {
 	if (rootEl.value == null) return;
@@ -211,9 +212,12 @@ if (props.content.sourceElement != null && props.activated) {
 		transform.value.scale = sourceTransform.scale;
 		transform.value.x = sourceTransform.x;
 		transform.value.y = sourceTransform.y;
+		canOpenAnimation = true;
 	}
 }
 
+const hideForFallback = ref(!canOpenAnimation);
+
 const isZooming = ref(false);
 
 function zoomInTo(x: number, y: number, factor = 1.1, withAnimation = false) {
@@ -257,19 +261,23 @@ function closeThis() {
 
 	if (rootEl.value == null) return;
 
-	enableTransition.value = true;
-	rootEl.value.offsetHeight; // reflow
-
 	const sourceTransform = getScaleAndTranslationForSourceElement();
 	if (sourceTransform != null) {
+		enableTransition.value = true;
+		rootEl.value.offsetHeight; // reflow
 		transform.value.x = sourceTransform.x;
 		transform.value.y = sourceTransform.y;
 		transform.value.scale = sourceTransform.scale;
 	} else {
-		transform.value.y = transform.value.y > 0 ? window.innerHeight : -window.innerHeight;
+		hideForFallback.value = true;
 	}
 }
 
+onMounted(() => {
+	rootEl.value.offsetHeight; // reflow
+	hideForFallback.value = false;
+});
+
 function onWheel(event: WheelEvent) {
 	event.preventDefault();
 
@@ -605,6 +613,12 @@ function onCLick() {
 	position: relative;
 	width: 100%;
 	height: 100%;
+	transition: scale 200ms ease, opacity 200ms ease !important;
+}
+
+.hideForFallback {
+	scale: 0.7 !important;
+	opacity: 0 !important;
 }
 
 .footer {