[datagrid] web client on macOS with touchbar: Attempt to scroll a DataGrid to the left side activates native Back navigation instead

[muknta]

Bug description

Chrome on macOS has a native navigation action on left swipe using two fingers at the available area.
This action is low priority in order to use other scroll views at the web page.

So if you have an active scroll, this native action would not be activated. But if your horizontal scroll view is at the left side, which means you cannot longer scroll to the left, the native back action will be activate on attempt to scroll/swipe to this side.

I suppose there's something wrong with loosing focus on the Flutter side.

P.S. We have this bug on our proprietary project, but I saw that your demo also reproduces that.

Steps to reproduce

1. open https://flutter.syncfusion.com/#/datagrid/getting-started
2. minimize the window, so a DataGrid wouldn't fit on your window
3. scroll DataGrid to the right
4. then try to scroll to the left, it immediately activates the Back navigation action

Code sample

Screenshots or Video

Stack Traces

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.32.4, on macOS 15.5 24F74 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)

[Gowtham-SF4769]

Hi @muknta ,

Thank you for bringing this matter to our attention.

We have carefully reviewed the information provided and conducted tests using the sample linked in the "Steps to Reproduce" section. Based on our evaluation, we were unable to replicate the issue as described—the sample appears to be functioning correctly in our environment.

To assist you more effectively and gain a clearer understanding of the issue, we kindly request the following:

• Any additional details or specific steps that may help us reproduce the problem.
• If possible, a video recording demonstrating the issue, which would greatly aid in our analysis.

A simplified, reproducible sample along with any further context you can provide will enable us to investigate the matter thoroughly and offer a more accurate resolution.

For your reference, we have also included a video demonstration showing that the sample is working as expected on our end.

VideoDemo:

Videodemo.mp4

We appreciate your cooperation and look forward to your response.

Regards,
Gowtham R

[muknta]

Hi @Gowtham-SF4769,
I highly appreciate your fast response.
Which device you're using? I am able to reproduce this issue on both MacBook Pro M1 and MacBook Pro M4 using touch bar, both have macOS 15.5.
The video:
https://drive.google.com/file/d/1CtqQcAIrgT3majbuilqsG01mwV761ZZ3/view?usp=sharing

BTW, the issue doesn't appear if I'm scrolling vertically at first, and then to the left without any interruptions.
But if I'm scrolling horizontally only, to the left will always cause the Back action.

Sincerely,
Mykyta

[Gowtham-SF4769]

Hi @muknta ,

Thank you for providing the video sample. Based on our analysis, we were able to successfully reproduce the issue on a Mac mini equipped with the M4 Pro chip.

Our observations indicate that the issue does not occur when horizontal scrolling is performed using the scrollbar, which is the standard method on desktop platforms. However, when the cursor is positioned over the control—without it being in focus—and the user scrolls, it unexpectedly triggers a back navigation action.

We believe this behavior may be associated with Chrome, potentially due to the way the framework handles gesture inputs. We will continue our investigation on the framework side and aim to provide you with a detailed update within the next two business days.

We appreciate your patience and understanding as we work to resolve this matter.

Regards,
Gowtham R

[abineshPalanisamy]

Hi @muknta ,

The issue appears to be within the Flutter framework itself. We have reported it to the Flutter framework team. They have suggested a workaround to avoid the issue.

Workaround :

Add the following code to the index.html file located in the web folder of your Flutter project.

 <style>
   html, body {
     overscroll-behavior-x: none;
   }
 </style>

We tested the workaround on our end, and it successfully resolved the problem. Could you please try the workaround provided by the framework on your side.

Additionally, you can follow the issue through the link below for further updates and details.

Framework - 171947

Regards,
Abinesh P