Latest chrome update broke DnD

[nstepanovPrelude]

After we updated chrome to latest version (106.0.5249.61) we noticed weird behavior in DnD logic. When I start to move element some other elements disappeared. When I do that second time everything gets back. I started to dig into it and found that in 'handleTopDragStart' event everything is fine but after it something goes wrong (HTML5BackendImpl.js). Other interesting thing is: when I try to resize window all UI elements comes back. So I tried to trigger resize event with hope to fix this, but it didn't work out.

Expected behavior When start drag element all other elements still showing

Video

Desktop:

• OS: macOS Monterey 12.6 (but the same in Windows)
• Browser: Chrome
• Version: 106.0.5249.61

Everything works fine with older chrome or any other browser (Safari, Firefox)

Dependencies I was able to update project as possible (we had old dependencies), but even with them it doesn't work. Now I have following versions: "react": "18.2.0", "react-dnd": "14.0.5", "react-dnd-html5-backend": "14.1.0", "react-dom": "18.2.0", "react-draggable": "4.1.0"

[pmartin-cogility]

I'm also experiencing this error after updating to Chrome 106.

[pmartin-cogility]

Actually, just adding document.body.style.transform = 'translateZ(0)'; to index.ts fixes it. Or...

body {
  transform: translateZ(0);
}

[wavded]

Same issue, seems to exist from 106 onwards (tested Canary, Brave, same issue)

[nstepanovPrelude]

Actually, just adding document.body.style.transform = 'translateZ(0)'; to index.ts fixes it. Or...

body {
  transform: translateZ(0);
}

Thanks! It helped me, I added this to css to my main form container and now it works fine!

[nstepanovPrelude]

It doesn't look like bug fix, so I don't know if it's ok to close this thread. But for now solution by pmartin-cogility works.

[akphi]

Is this fixed in the latest Chrome? I'm running on 106.0.5249.91 (Official Build) (arm64) on Mac and things seem fine to me so far.

[nstepanovPrelude]

Is this fixed in the latest Chrome? I'm running on 106.0.5249.91 (Official Build) (arm64) on Mac and things seem fine to me so far.

Just tried. No, it hasn't been fixed by Chrome. But pmartin-cogility fix still works

[wavded]

Chromium bug filed:

https://bugs.chromium.org/p/chromium/issues/detail?id=1370030

[cthorner]

I'm on an old version of react-dnd and I'm not sure if this is related, but we ran into an issue where this crashes the latest version of chrome(previous version works fine):

const img = new Image()

img.src = undefined

this.image.onload = () => {
  connectDragPreview(img)
}

Changing the src to an actual image(not undefined) fixes the issue for us.

[rileyjshaw]

I had the same issue following this example (CodeSandbox). Simply removing { captureDraggingState: true } from the following effect:

// Hide the default preview image.
useEffect(() => {
  previewRef(getEmptyImage(), { captureDraggingState: true });
}, [previewRef]);

works for me so far on the browsers I’ve tested (Firefox, Chrome, Safari). Final effect after removal looks like this:

// Hide the default preview image.
useEffect(() => {
  previewRef(getEmptyImage());
}, [previewRef]);