Skip to content

fix: Match mobile-web :hover behavior on touch#9793

Merged
MatiPl01 merged 6 commits into
mainfrom
@matipl01/css-hover-web-parity
Jul 8, 2026
Merged

fix: Match mobile-web :hover behavior on touch#9793
MatiPl01 merged 6 commits into
mainfrom
@matipl01/css-hover-web-parity

Conversation

@MatiPl01

@MatiPl01 MatiPl01 commented Jun 30, 2026

Copy link
Copy Markdown
Member

Description

Makes touch :hover match how mobile Chromium web browsers work:

  • a touch-down hovers the views under the finger and tracks only the first touch ignoring rest,
  • moves and scrolls in between change nothing - only the touch down and touch up position matters so scrolling/moving a finger while keeping it on the screen should not dismiss the hover state,
  • on release a view stays hovered only if the finger is still over it

This PR replaces the old slop-based dismissal, which dropped :hover on any movement even when the finger released back over the view.

Example recordings

Before (iOS)

ScreenRecording_07-07-2026.14-01-31_1.1.mp4

After (iOS)

ScreenRecording_07-07-2026.13-53-29_1.1.mp4

After (Android)

Screen_Recording_20260707_144105_FabricExample.1.mp4

@MatiPl01 MatiPl01 self-assigned this Jun 30, 2026
Base automatically changed from @wisniewskij/fix-hover-scrolling-ios to main June 30, 2026 14:56
@MatiPl01 MatiPl01 force-pushed the @matipl01/css-hover-web-parity branch from 9157a9d to bf6fed5 Compare June 30, 2026 15:19
@MatiPl01 MatiPl01 force-pushed the @matipl01/css-hover-web-parity branch from 28af0ad to 3cc7b55 Compare July 3, 2026 07:19
@MatiPl01 MatiPl01 force-pushed the @matipl01/css-hover-web-parity branch from fdc9959 to 1031a57 Compare July 8, 2026 13:35
@MatiPl01 MatiPl01 marked this pull request as ready for review July 8, 2026 13:39
@MatiPl01 MatiPl01 requested review from tjzel and tomekzaw July 8, 2026 13:46
@MatiPl01 MatiPl01 added this pull request to the merge queue Jul 8, 2026
Merged via the queue into main with commit 5c47f41 Jul 8, 2026
12 checks passed
@MatiPl01 MatiPl01 deleted the @matipl01/css-hover-web-parity branch July 8, 2026 14:43
pull Bot pushed a commit to esinanturan/react-native-reanimated that referenced this pull request Jul 8, 2026
…ware-mansion#9877)

Make touch `:active` transient like mobile web: a press that turns into
a scroll or drags past the tap slop clears `:active`, instead of holding
it until the finger lifts.

Stacked on software-mansion#9793 (touch `:hover` web-parity).

## Example recording

### `:active` dismissed once a press moves past the tap slop

Press and hold the box, then drag the finger off it. Works the same on
android.

| Before | After |
|-|-|
| `:active` stays held until the finger lifts, even as the press turns
into a scroll | `:active` is dismissed as soon as the press moves past
the tap slop, matching mobile web |
|-|-|
| <video
src="https://github.com/user-attachments/assets/0c09bb02-b5f8-4a9f-8e34-a4419f477255"
/> | <video
src="https://github.com/user-attachments/assets/719a8e1d-d048-4d59-aa13-74b3a2f9817d"
/> |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants