From 7ffbbc30c1078c4eb689a4c7c0612d1a152b3756 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 11 Sep 2025 09:45:04 -0700
Subject: [PATCH] fix: position ColorLoupe relative to ColorHandle in V3
 ColorWheel (#8846)

* fix: position color loupe relative to the color handle in V3 ColorWheel

* fix lint
---
 packages/@react-spectrum/color/src/ColorThumb.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/@react-spectrum/color/src/ColorThumb.tsx b/packages/@react-spectrum/color/src/ColorThumb.tsx
index 626c3dd58b0..cdc363a8552 100644
--- a/packages/@react-spectrum/color/src/ColorThumb.tsx
+++ b/packages/@react-spectrum/color/src/ColorThumb.tsx
@@ -69,11 +69,15 @@ function ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {
   let thumbTop = style.top || '50%';
   if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {
     thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
+  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {
+    thumbTop = parseFloat(thumbTop);
   }
 
   let thumbLeft = style.left || '50%';
   if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {
     thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
+  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {
+    thumbLeft = parseFloat(thumbLeft);
   }
 
   return (