forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix Safari layout shift issue with SubtleHover (#10135)
+5
-1
+5
-1
src/components/SubtleHover.tsx
+5
-1
src/components/SubtleHover.tsx
···
1
1
import {View} from 'react-native'
2
2
3
-
import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
3
+
import {atoms as a, useTheme, type ViewStyleProp, web as webOnly} from '#/alf'
4
4
import {IS_NATIVE, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
5
5
6
6
export function SubtleHover({
···
33
33
a.transition_opacity,
34
34
t.atoms.bg_contrast_50,
35
35
style,
36
+
// Force Safari to composite the overlay on its own GPU layer.
37
+
// This fixes a layout shift that happens due to different subpixel
38
+
// rounding when the overlay is composited on hover.
39
+
webOnly({willChange: 'opacity'}),
36
40
{opacity: hover ? opacity : 0},
37
41
]}
38
42
/>