[drawer] Preserve cross-axis scrolling during touch gestures

[atomiks]

• I have followed (at least) the PR section of the contributing guide.

Fixes drawer touch handling so cross-axis scrolling remains native (for example, vertical scroll inside side drawers and horizontal scroll inside top/bottom drawers) instead of being incorrectly blocked by swipe-dismiss prevention

Fixes #4180

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/@base-ui/react@4187
  

  pnpm add https://pkg.pr.new/@base-ui/utils@4187
  

commit: c4a31a3

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+566B(+0.12%)	🔺+222B(+0.15%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	b620f2d
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/69a7bf494ee01c0008c7f3b2
😎 Deploy Preview	https://deploy-preview-4187--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[CiscoFran10]

I tested this on iOS and found this issue.

On Chrome (iOS), if I scroll the page vertically and then open a left drawer (swipeDirection="left", Y overflow) while the scrollbar still visible, I’m still able to scroll the underlying page after the drawer opens. On Safari this doesnt happen.

bug-chrome.mp4

[CiscoFran10]

I tested this on iOS and found this issue.

On Chrome (iOS), if I scroll the page vertically and then open a left drawer (swipeDirection="left", Y overflow) while the scrollbar still visible, I’m still able to scroll the underlying page after the drawer opens. On Safari this doesnt happen.

bug-chrome.mp4

This is a pretty unlikely edge case, so it’s not something users would commonly hit, but, it might still be worth exploring. I’m not sure whether this scroll leakage could lead to other issues.

[atomiks]

On Safari this doesnt happen

Interesting. Usually iOS is the same no matter the browser due to the underlying WebKit engine, so it's a bit annoying when they diverge. Not sure if this is fixable or if it's a browser quirk as scroll locking on iOS without issues is really hard.

[atomiks]

Codex Review

Overview

This branch addresses drawer cross-axis touch scrolling by latching native cross-axis intent during a gesture, adds targeted regression coverage for jitter and mixed-axis cases, and introduces an experiments matrix/demo for manual verification.

Findings

1. [Non-blocking] Reduce duplication in the new cross-axis regression tests

Impact: The four axis-specific skipIf(isJSDOM) tests are near-identical and differ mostly by swipeDirection, overflow style, and gesture vectors. Keeping them hand-expanded increases maintenance overhead and makes it easier for one case to drift from the others during future edits.

Evidence: packages/react/src/drawer/viewport/DrawerViewport.test.tsx:1608, packages/react/src/drawer/viewport/DrawerViewport.test.tsx:1654, packages/react/src/drawer/viewport/DrawerViewport.test.tsx:1700, packages/react/src/drawer/viewport/DrawerViewport.test.tsx:1746 share the same render/interaction/assertion structure with minor parameter changes.

Recommendation: Convert these into a table-driven test (it.each) with a small case matrix (swipeDirection, overflowStyle, start/move coordinates, expected swiping attr). This preserves coverage while reducing surface area and copy/paste risk.

2. [Informational] Touchmove hot-path perf check does not show actionable regression signal

Impact: The cross-axis helper sits on a hot touchmove path, so validating overhead is important; however, the current micro-check indicates sub-microsecond per-call cost where practical impact is likely negligible.

Evidence: Lightweight benchmark (node /tmp/drawer-touch-helper-bench.mjs) measured: baseline update-only 7.71ms / 10M calls (0.001us/call), helper fast-return 38.41ms (0.004us/call), helper latched-return 38.05ms (0.004us/call).

Recommendation: No immediate code change required for runtime perf based on this check; continue relying on bundle-size CI/snapshot signals for shipped size tracking.

No blocking issues found in this patch.

Confidence: 4/5

High confidence from full-branch inspection, targeted touch-path review, and rerunning relevant checks; residual uncertainty is mostly around platform-specific touch behavior that only broad device coverage can fully validate.

Notes

• Full-branch pass covered all files changed vs upstream/master (drawer runtime logic, drawer tests, and experiments route/demo files).
• Validation run: pnpm typescript, pnpm test:jsdom DrawerViewport --no-watch, pnpm test:chromium DrawerViewport --no-watch.