From cde872fcf7256ea41e9943be2f307a5eae77f889 Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Tue, 17 Feb 2026 19:56:46 -0500
Subject: [PATCH] fix: eliminate visual shaking when adjusting crop region
 (#8896)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Replace the dual-image approach (dimmed <img> + background-image in crop
box) with a single <img> and a box-shadow overlay on the crop box. The
previous approach required two independently positioned images to be
pixel-perfectly aligned, which caused visible jitter from sub-pixel
rounding differences, especially when zoomed in.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8896-fix-eliminate-visual-shaking-when-adjusting-crop-region-3086d73d365081309703d3ab0d4ad44d)
by [Unito](https://www.unito.io)
---
 src/components/imagecrop/WidgetImageCrop.vue |  9 +++------
 src/composables/useImageCrop.ts              | 12 ------------
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/components/imagecrop/WidgetImageCrop.vue b/src/components/imagecrop/WidgetImageCrop.vue
index d093ddad27..86e799a959 100644
--- a/src/components/imagecrop/WidgetImageCrop.vue
+++ b/src/components/imagecrop/WidgetImageCrop.vue
@@ -28,7 +28,7 @@
         :src="imageUrl"
         :alt="$t('imageCrop.cropPreviewAlt')"
         draggable="false"
-        class="block size-full object-contain select-none brightness-50"
+        class="block size-full object-contain select-none"
         @load="handleImageLoad"
         @error="handleImageError"
         @dragstart.prevent
@@ -36,14 +36,12 @@
 
       <div
         v-if="imageUrl && !isLoading"
-        class="absolute box-content cursor-move overflow-hidden border-2 border-white"
+        class="absolute box-content cursor-move border-2 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]"
         :style="cropBoxStyle"
         @pointerdown="handleDragStart"
         @pointermove="handleDragMove"
         @pointerup="handleDragEnd"
-      >
-        <div class="pointer-events-none size-full" :style="cropImageStyle" />
-      </div>
+      />
 
       <div
         v-for="handle in resizeHandles"
@@ -131,7 +129,6 @@ const {
   isLockEnabled,
 
   cropBoxStyle,
-  cropImageStyle,
   resizeHandles,
 
   handleImageLoad,
diff --git a/src/composables/useImageCrop.ts b/src/composables/useImageCrop.ts
index 5d47ef84b5..6722c34a0f 100644
--- a/src/composables/useImageCrop.ts
+++ b/src/composables/useImageCrop.ts
@@ -243,17 +243,6 @@ export function useImageCrop(nodeId: NodeId, options: UseImageCropOptions) {
     height: `${cropHeight.value * scaleFactor.value}px`
   }))
 
-  const cropImageStyle = computed(() => {
-    if (!imageUrl.value) return {}
-
-    return {
-      backgroundImage: `url(${imageUrl.value})`,
-      backgroundSize: `${displayedWidth.value}px ${displayedHeight.value}px`,
-      backgroundPosition: `-${cropX.value * scaleFactor.value}px -${cropY.value * scaleFactor.value}px`,
-      backgroundRepeat: 'no-repeat'
-    }
-  })
-
   interface ResizeHandle {
     direction: ResizeDirection
     class: string
@@ -605,7 +594,6 @@ export function useImageCrop(nodeId: NodeId, options: UseImageCropOptions) {
     isLockEnabled,
 
     cropBoxStyle,
-    cropImageStyle,
     resizeHandles,
 
     handleImageLoad,