Mouse cursor offset from dragged box by several inches

[NickEmpetvee]

Describe the bug

React 18.0.2
@emotion/styled 11.10.5
@mui/icons-material 5.11.0
@mui/material 5.11.5

What I'm noticing is that for code like the below, when I click one of the GridItemWrappers, it properly is draggable and movable. However my mouse cursor is offset from the dragged box by several inches. Does anyone have any thoughts on what might be causing that and how to close the distance between mouse cursor and box?

Your Example Website or App

n/a

Steps to Reproduce the Bug or Issue

The code is from a tutorial and works fine in a minimal page. Where it has issues is in a project that has a MUI theme, etc. Maybe there's something from the MUI theme or something else that is hurt by the inheritence.

The code:

import GridLayout from "react-grid-layout";
import styled from "styled-components";

const layout = [
  { i: "blue-eyes-dragon", x: 0, y: 0, w: 1, h: 1 },
  { i: "dark-magician", x: 1, y: 0, w: 1, h: 1 },
  { i: "kuriboh", x: 2, y: 0, w: 1, h: 1 },
  { i: "spell-caster", x: 3, y: 0, w: 1, h: 1 },
  { i: "summoned-skull", x: 4, y: 0, w: 1, h: 1 }
];

const GridItemWrapper = styled.div`
  background: #f5f5f5;
`;

const GridItemContent = styled.div`
  padding: 8px;
`;

const Root = styled.div`
  padding: 16px;
`;

export const Grid = () => {
  return (
    <Root>
      <GridLayout layout={layout} cols={5} rowHeight={300} width={1000}>
        <GridItemWrapper key="blue-eyes-dragon">
          <GridItemContent>Blue Eyes Dragon</GridItemContent>
        </GridItemWrapper>
        <GridItemWrapper key="dark-magician">
          <GridItemContent>Dark Magician</GridItemContent>
        </GridItemWrapper>
        <GridItemWrapper key="kuriboh">
          <GridItemContent>Kuriboh</GridItemContent>
        </GridItemWrapper>
        <GridItemWrapper key="spell-caster">
          <GridItemContent>Spell Caster</GridItemContent>
        </GridItemWrapper>
        <GridItemWrapper key="summoned-skull">
          <GridItemContent>Summoned Skull</GridItemContent>
        </GridItemWrapper>
      </GridLayout>
    </Root>
  );
};

Expected behavior

There should be a basic distance between mouse cursor and dragged item and not several inches.

react-grid-layout library version

1.4.2

Operating System Version

Windows

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[EnriqueDev]

Did you try making <Root> position: static?

[jessemoe]

Did you try making <Root> position: static?

It didn't work

[TeoAvignon]

Looks like I have the same issue with v1.4.4

[Aanchal1103]

I believe we also have this issue in our app and can also reproduce it on a demo example from React grid layout itself.

Problem: When dragging, the cursor is not aligned with the resize handler sometimes. It happens when moving the cursor outside the drag and drop bounds, for example. But that does not seem to be the only case.

Demo link: https://react-grid-layout.github.io/react-grid-layout/examples/1-basic.html

Screen recordings:

ResizeBug.mov

[m-scimonelli]

I get this issue too. It happens when I move the cursor too fast or anytime I move the cursor outside the window.
I noticed that having Chrome inspector open will trigger this even when moving the cursor at "normal" speeds.

[Mudassarali222]

I am faceing same issue with "react-grid-layout": "^1.4.4" and next js 13.4.9 page dir.
lots of wasting time i found this (import "react-grid-layout/css/styles.css";) but its not working for mouse cursor position.

[brunochaina]

We are also experiencing this issue on our app with ^1.4.3

[ThomasOh92]

I get this issue too. It happens when I move the cursor too fast or anytime I move the cursor outside the window. I noticed that having Chrome inspector open will trigger this even when moving the cursor at "normal" speeds.

I'm facing this same problem.

Before I implemented Redux into my app to manage the layout as a state, it was fine.

but now that I'm using Redux, the offset occurs with multiple quick drags. it's not dramatic, but it's nowhere near as smooth/perfect as the demos

I'm building an app in electron btw

[hungnmNWS]

meet same problem with heavy data :(

[Arkellys]

I have this problem on an Electron app too, and it happens even when the layout doesn't contain any heavy data when the dev tools are open. I can't reproduce it on CodeSandbox though. I also noticed the issue with heavy data, on a production build with the dev tools closed.

Electron (v28, Chromium 120 - also tested on v30 with Chromium 124)

CodeSandbox (Brave v1.65.122, Chromium 124)

---

Steps to reproduce:

• Install Electron Fiddle
• Copy the files from this gist in a folder
• Open the folder with Fiddle
• Open the dev tools
• Move the blocks

[hungnmNWS]

@Arkellys i met same problems, you can see the CPU will be really high when bug occus

[Arkellys]

I think this issue is actually a duplicate of #2003, which contains useful information.

[liamlows]

same issue here occurs with dev tools open in chrome