From 3a8dc752332f24db48a45fae3974d4cb5572defc Mon Sep 17 00:00:00 2001
From: Stardust <1441308506a@gmail.com>
Date: Sat, 14 Mar 2026 15:03:16 +0800
Subject: [PATCH] fix(stage-tamagotchi): fix model flickering and jumping on
 window resize (#1341)

---
 .../src/components/scenes/live2d/Model.vue    | 12 ++---
 packages/ui/src/components/layouts/screen.vue | 51 ++-----------------
 2 files changed, 10 insertions(+), 53 deletions(-)

diff --git a/packages/stage-ui-live2d/src/components/scenes/live2d/Model.vue b/packages/stage-ui-live2d/src/components/scenes/live2d/Model.vue
index 721c1e2ec..e3bc64d43 100644
--- a/packages/stage-ui-live2d/src/components/scenes/live2d/Model.vue
+++ b/packages/stage-ui-live2d/src/components/scenes/live2d/Model.vue
@@ -5,7 +5,7 @@ import type { PixiLive2DInternalModel } from '../../../composables/live2d'
 
 import { listenBeatSyncBeatSignal } from '@proj-airi/stage-shared/beat-sync'
 import { useTheme } from '@proj-airi/ui'
-import { breakpointsTailwind, until, useBreakpoints, useDebounceFn } from '@vueuse/core'
+import { breakpointsTailwind, until, useBreakpoints } from '@vueuse/core'
 import { formatHex } from 'culori'
 import { Mutex } from 'es-toolkit'
 import { storeToRefs } from 'pinia'
@@ -120,9 +120,9 @@ function setScaleAndPosition() {
   if (!model.value)
     return
 
-  let offsetFactor = 2.2
+  let offsetFactor = 1.0
   if (isMobile.value) {
-    offsetFactor = 2.2
+    offsetFactor = 1.0
   }
 
   const heightScale = (props.height * 0.95 / initialModelHeight.value * offsetFactor)
@@ -137,7 +137,7 @@ function setScaleAndPosition() {
   model.value.scale.set(scale * props.scale, scale * props.scale)
 
   model.value.x = (props.width / 2) + offset.value.xOffset
-  model.value.y = props.height + offset.value.yOffset
+  model.value.y = (props.height / 2) + offset.value.yOffset
 }
 
 const live2dStore = useLive2d()
@@ -398,8 +398,6 @@ async function setMotion(motionName: string, index?: number) {
   }
 }
 
-const handleResize = useDebounceFn(setScaleAndPosition, 100)
-
 const dropShadowColorComputer = ref<HTMLDivElement>()
 const dropShadowAnimationId = ref(0)
 
@@ -420,7 +418,7 @@ function updateDropShadowFilter() {
   model.value.filters = [dropShadowFilter.value]
 }
 
-watch([() => props.width, () => props.height], handleResize)
+watch([() => props.width, () => props.height], setScaleAndPosition)
 watch(modelSrcRef, async () => await loadModel(), { immediate: true })
 watch(dark, updateDropShadowFilter, { immediate: true })
 watch([model, themeColorsHue], updateDropShadowFilter)
diff --git a/packages/ui/src/components/layouts/screen.vue b/packages/ui/src/components/layouts/screen.vue
index fc5c752ba..2edb343fe 100644
--- a/packages/ui/src/components/layouts/screen.vue
+++ b/packages/ui/src/components/layouts/screen.vue
@@ -1,61 +1,20 @@
 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints, useElementBounding, useWindowSize } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 const containerRef = ref<HTMLDivElement>()
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
-const { width, height } = useWindowSize()
+const { width } = useWindowSize()
 const containerElementBounding = useElementBounding(containerRef, { immediate: true, windowResize: true, reset: true })
 
-const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
-const isTablet = computed(() => breakpoints.between('md', 'lg').value)
-const isDesktop = computed(() => breakpoints.greaterOrEqual('lg').value)
-
 const canvasWidth = computed(() => {
-  if (isDesktop.value)
-    return containerElementBounding.width.value
-  else if (isMobile.value)
+  if (breakpoints.smaller('lg').value)
     return (width.value - 16) // padding
-  else if (isTablet.value)
-    return (width.value - 16) // padding
-  else
-    return containerElementBounding.width.value
+  return containerElementBounding.width.value
 })
 
-const canvasHeight = ref(0)
-
-watch([width, height, containerRef], () => {
-  const bounding = containerRef.value?.parentElement?.getBoundingClientRect()
-
-  if (isDesktop.value) {
-    canvasHeight.value = bounding?.height || 0
-  }
-  else if (isMobile.value) {
-    canvasHeight.value = bounding?.height || 0
-  }
-  else if (isTablet.value) {
-    canvasHeight.value = bounding?.height || 0
-  }
-  else {
-    canvasHeight.value = 600
-  }
-})
-
-watch([containerElementBounding.width, containerElementBounding.height], () => {
-  if (isDesktop.value) {
-    canvasHeight.value = containerElementBounding.height.value
-  }
-  else if (isMobile.value) {
-    canvasHeight.value = containerElementBounding.height.value
-  }
-  else if (isTablet.value) {
-    canvasHeight.value = containerElementBounding.height.value
-  }
-  else {
-    canvasHeight.value = 600
-  }
-})
+const canvasHeight = computed(() => containerElementBounding.height.value || 0)
 
 onMounted(async () => {
   if (!containerRef.value)