From 9b20023c8653ca67e9b54b8720c6ae7471e469d6 Mon Sep 17 00:00:00 2001
From: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
Date: Wed, 1 Apr 2026 09:12:11 -0700
Subject: [PATCH] Fix Safari layout shift issue with SubtleHover (#10135)

---
 src/components/SubtleHover.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/SubtleHover.tsx b/src/components/SubtleHover.tsx
index 22a26f0989..c3d1610a9b 100644
--- a/src/components/SubtleHover.tsx
+++ b/src/components/SubtleHover.tsx
@@ -1,6 +1,6 @@
 import {View} from 'react-native'
 
-import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
+import {atoms as a, useTheme, type ViewStyleProp, web as webOnly} from '#/alf'
 import {IS_NATIVE, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
 
 export function SubtleHover({
@@ -33,6 +33,10 @@ export function SubtleHover({
         a.transition_opacity,
         t.atoms.bg_contrast_50,
         style,
+        // Force Safari to composite the overlay on its own GPU layer.
+        // This fixes a layout shift that happens due to different subpixel
+        // rounding when the overlay is composited on hover.
+        webOnly({willChange: 'opacity'}),
         {opacity: hover ? opacity : 0},
       ]}
     />