Description

Pull-to-refresh gesture was intercepting taps on buttons near the top of the page (e.g., Polymarket "Sign Up" / "Log In" buttons). The gesture handler called stateManager.activate() immediately in onTouchesDown for the pull zone (y < 50px), stealing the touch from the WebView before knowing whether the user intended to tap or pull.

Changes

Deferred activation for pull-to-refresh: Instead of activating immediately, the gesture enters a pending_refresh state in onTouchesDown. New onTouchesMove and onTouchesUp handlers measure the movement delta:

• Downward movement >10px → activate pull-to-refresh
• Horizontal/upward movement >10px → fail and let WebView handle
• Finger lifts with <10px movement (tap) → fail and let WebView handle

Gesture.Simultaneous instead of Gesture.Race: Deferred activation requires that the Native gesture (WebView scroll) does not cancel our Pan while it is deciding. Gesture.Simultaneous allows both to run independently — taps pass through to the WebView while our Pan stays in BEGAN state deciding, and when Pan activates for a real pull at the top of the page, the WebView has nothing to scroll so both coexist without visual conflict.

Why not other approaches

• Gesture.Race + deferred activation: Native wins the race and cancels Pan before onTouchesMove fires
• Gesture.Race + immediate activation + synthetic JS click replay: Pull-to-refresh works but synthetic events have isTrusted = false — React ignores them
• Gesture.Exclusive + deferred activation: Blocks Native while Pan is in BEGAN — nothing works

Changelog

CHANGELOG entry: Fixed pull-to-refresh gesture intercepting taps on buttons near the top of the page in the in-app browser

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MCWP-352

Manual testing steps

Feature: Browser gesture tap passthrough

  Scenario: User taps a button near the top of a webpage
    Given the user is on polymarket.com in the in-app browser
    And the page is scrolled to the top (not scrolled at all)

    When user taps the "Log In" or "Sign Up" button
    Then the login/signup modal should appear

  Scenario: User pulls to refresh from the top of the page
    Given the user is on any webpage in the in-app browser
    And the page is scrolled to the top

    When user places finger near the top of the page and drags downward
    Then the refresh indicator should appear
    And the page should reload when pulled past the threshold

  Scenario: User swipes back from the left edge
    Given the user has navigated to at least one page in the in-app browser

    When user swipes from the left edge of the screen toward the right
    Then the browser should navigate back to the previous page

  Scenario: User swipes forward from the right edge
    Given the user has navigated back at least once in the in-app browser

    When user swipes from the right edge of the screen toward the left
    Then the browser should navigate forward

  Scenario: User scrolls normally in the center of the page
    Given the user is on any webpage in the in-app browser

    When user scrolls up or down in the center of the page
    Then the page should scroll normally without triggering any gestures

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.