[data grid] Dragging a row item beyond the screen scrolling is not functioning as expected on Mac OS

[LuckyMadu]

Steps to reproduce

 <DataGridPro
          rowDragStart={() => console.log("dragging")}
          ref={dataGridRef}
          getRowId={(row) => row.id}
          rows={tracks}
          columns={columns}
          rowReordering
          autoHeight
          rowSelection
          loading={loading}
          rowSelectionModel={rowSelectionModel}
          onRowSelectionModelChange={(newSelection) => {
            setRowSelectionModel(newSelection);
          }}
          onRowOrderChange={handleRowOrderChange}
          // disable all the features except quick filter
          disableColumnFilter
          disableDensitySelector
          disableColumnMenu
          slots={{
            toolbar: GridToolbar,
            footerCell: {
              backgroundColor: "black",
            },
          }}
          initialState={{
            filter: {
              filterModel: {
                items: [],
                quickFilterValues: [""],
              },
            },
          }}
          slotProps={{
            row: {
              onContextMenu: handleRowContextMenu,
              style: { cursor: "context-menu" },
            },
            toolbar: {
              showQuickFilter: true,
            },
          }}
        />

Current behavior

Refer to this video:
https://github.com/mui/mui-x/assets/19740478/9084ba61-55f2-4c70-89aa-b5c11c30fa65

Expected behavior

When dragging a row item, the page should scroll automatically.

Context

No response

Your environment

npx @mui/envinfo

  Chrome Browser
  
  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 21.5.0 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.216
    Edge: Not Found
    Safari: 16.5.1
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.16 
    @mui/core-downloads-tracker:  5.14.10 
    @mui/icons-material: ^5.14.7 => 5.14.9 
    @mui/lab: ^5.0.0-alpha.142 => 5.0.0-alpha.145 
    @mui/material: ^5.14.7 => 5.14.10 
    @mui/private-theming:  5.14.10 
    @mui/styled-engine:  5.14.10 
    @mui/system:  5.14.10 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.10 
    @mui/x-data-grid:  6.15.0 
    @mui/x-data-grid-pro: ^6.14.0 => 6.15.0 
    @mui/x-date-pickers:  6.15.0 
    @mui/x-date-pickers-pro: ^6.14.0 => 6.15.0 
    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view:  6.0.0-alpha.1 
    @types/react: ^18.0.24 => 18.2.22 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0

Search keywords: DataGridPro, Scrolling, Dragging

[LuckyMadu]

This is working when setting this prop and making a fixed height for the table: sx={{  height: 80vh"}}. But it's not a requirement.

[LuckyMadu]

The scrolling function for reordering rows is not working properly on Safari.

[michelengelen]

This is working when setting this prop and making a fixed height for the table: sx={{  height: "80vh"}}. But it's not a requirement.

It is not, but otherwise you wouldn't have scrolling.

The scrolling function for reordering rows is not working properly on Safari.

I can confirm this. Also the dragged container looks weird and sometimes even picks the wrong DOM element.

Screen.Recording.2024-01-15.at.10.18.32.mov

Going to put this on the board for the team to assess! Thanks for raising it @LuckyMadu 🙇🏼

[cherniavskii]

I can reproduce it in v7, and it seems to be related to #10059
https://mui.com/x/react-data-grid/row-ordering/

Screen.Recording.2024-04-15.at.17.27.16.mov

[ritvik-sethi]

@cherniavskii
Completely Unrelated, I have a couple of questions regarding the implementation of drag-and-drop functionality:

1. How did you implement a custom drag icon when reordering rows?
2. How did you manage the opacity of the floating draggable cell during the drag operation?

Could you please provide detailed explanations for both of these aspects?