search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.07k stars 1.26k forks source link

[data grid] Prevent diagonal scrolling on iOS #11230

Open oliviertassinari opened 9 months ago

oliviertassinari commented 9 months ago

This is a continuation of the discussion that started at https://github.com/mui/mui-x/pull/10059#issuecomment-1817418743 about the scrolling experience on mobile. The second comment about this: https://github.com/mui/mui-x/pull/10059#issuecomment-1828581809.

I think that we all agree that the best UX on mobile is one where the scrolling direction is relatively well "fixed".

The test environment: https://next.mui.com/x/react-data-grid/#pro-plan.

You can find another example with https://docs.grid.glideapps.com/api/dataeditor/input-interaction#preventdiagonalscrolling. Implemented here. Related issue: https://github.com/glideapps/glide-data-grid/issues/27.

On Android, the native scroll feels "right" ✅, it has a logic that locks the scroll in one direction once you are into it, but still lets you easily change the scroll direction with a large enough finger movement and without having to touch up and down. I don't think we should change it.

On iOS, the native scroll experience feels "broken" ❌, it's too hard to scroll vertically or horizontally without "drifting". We should fix that.

https://github.com/mui/material-ui/issues/20990 is a bit related but a different problem, though it raises how touch-action could be part of the solution.

Benchmarks

romgrk commented 9 months ago

I think this could be extended to the desktop as well.

When I'm scrolling say vertically, it often happens that the viewport will deviate slightly horizontally as I don't scroll perfectly straight. It would feel better if it didn't happen, not only for the UX but also because the horizontal scroll can trigger a column re-render and that can be very expensive if the user is scrolling vertically at the same time.

The implementation would need to be really good, because otherwise it can make the grid very annoying to use. For example, in ag-grid the scroll-lock is kept active as long as the scroll hasn't completely stopped for maybe 0.75-1.0 seconds but the timer is extended even by user inputs that don't moved the viewport, so if I scroll vertically then directly switch to horizontal, I can keep inputing scroll gestures forever and it will not move the viewport until I stop for 1 second. That's obviously a very bad implementation.

I think we should have the scroll-lock implement just a tiny bit of resistance. On possible implementation could be that the scroll-lock switches only when one of the x/y components of the wheel or touchmove event becomes bigger than the other. E.g. if dx = -100 and dy = +0.5, we can safely ignore the dy.

oliviertassinari commented 9 months ago

to the desktop as well. When I'm scrolling say vertically

@romgrk Do you mean on Windows? I can't reproduce it on macOS (desktop).

should have the scroll-lock implement just a tiny bit of resistance.

Agree. For me, macOS is great, it can be the target for mouse interactions. Android is great, it can be the target for touch interactions.

On macOS (desktop), it feels like the implementation relies on:

On Android, it feels like the implementation relies on:

In these two, dx, dy feels computed over the span of the last 10 events.

romgrk commented 9 months ago

Yeah I'm on chrome linux, but usually it behaves the same as chrome windows.

lauri865 commented 9 months ago

That would be awesome. It's impossible to scroll in straight line on iPhone.

Furthermore, you may want to disable overscroll-behavior. Every time I visit mui-x on my iPhone, I think the virtualization is laggy/broken because of overscroll-behavior. Try scrolling up/down and pull a bit to the right (so that it overscrolls on the left-side), and you'll notice how next block of rows will display only after a visible delay, and at once.

No issues on the desktop though. The experience is great on MacOS, and would be great not to have any artifical delays to the native behaviour there.

lucare commented 4 months ago

Did this feature get implemented? I like to switch to MUI X for a project, but both the diagonal scroll and over scroll bounce are what are giving me pause at the moment. I would really like to use MUI X Premium (since I also need grouping) since otherwise MUI X is much faster and than what I am currently using.

oliviertassinari commented 4 months ago

@lucare Out of curiosity, what are you using now that is too slow?

As for this issue, I wouldn't expect this to be super hard to fix. For example, I had to solve problems like this in the past https://github.com/oliviertassinari/react-swipeable-views/blob/be57b7d9ba34c349a725b5ce9c0b265e0a9a9c18/packages/react-swipeable-views/src/SwipeableViews.js#L420-L440 or https://github.com/mui/material-ui/issues/20990#issuecomment-626801868, I don't recall it was a big effort.

Maybe this could be a cool item as part of the onboarding of @KenanYusuf in the team 😄