Skip to content

[drawer] Cross-axis scroll still blocked on iOS below the 6px touchmove threshold (#4187 residual) #5255

Description

@JosNun

Bug report

Current behavior

Vertical scrolling inside a left/right Drawer intermittently fails on iOS. The same drag scrolls sometimes and not others; when it fails the drawer nudges sideways instead of the content scrolling.

The reliable tell: it scrolls only when the touchmoves are cancelable: false. When they stay cancelable: true, scroll is blocked and scrollTop never moves.

Expected behavior

A vertical drag scrolls the drawer content every time, regardless of speed.

Reproducible example

https://github.com/JosNun/baseui-drawer-ios-scroll-repro
StackBlitz: https://stackblitz.com/github/JosNun/baseui-drawer-ios-scroll-repro

Open on iOS Safari or the iOS Simulator and drag the list a few times. The on-screen log prints dy, cancelable, and scrollΔ per touchmove so you can see the correlation.

Base UI version

v1.6.0

Which browser are you using?

Safari iOS

Which OS are you using?

iOS (reproduces on a physical device and in the Simulator)

Which assistive tech are you using (if applicable)?

N/A

Additional context

Looks like a residual of #4180 / #4306, which #4187 closed. #4187's cross-axis preservation only yields once the vertical delta passes ~6px, so DrawerViewport's handler still preventDefaults the first touchmove when it's below that. On iOS, preventing the first cancelable touchmove cancels scrolling for the whole gesture, so a drag whose first move lands under 6px is locked to no-scroll (every later move stays cancelable: true, scrollTop stuck). A drag whose first move is already past 6px yields and scrolls. Movement speed decides which, hence the intermittency.

touch-action: pan-y does not help (it cannot override an explicit preventDefault on a cancelable event). data-base-ui-swipe-ignore on the scroll container does fix it, at the cost of swipe-to-dismiss from that region.

Sample from the repro log:

blocked:  #0 dy=-3  cancelable=true   scrollΔ=0
          #7 dy=-66 cancelable=true   scrollΔ=0
scrolls:  #0 dy=-9  cancelable=true   scrollΔ=0
          #2 dy=-15 cancelable=false  scrollΔ=2
          end                          scrollΔ=71

Metadata

Metadata

Assignees

No one assigned

    Labels

    browser: SafariAffects or fixes behavior in Apple Safari.component: drawerChanges related to the drawer component.mobileTargets mobile platform.type: bugIt doesn't behave as expected.

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions