Wrong dragPreview in Chrome

[tTwisTt]

1. Screenshot below shows strange issue related to dragPreview. In my case draggable table row node is both source and target. For some reasons drag preview contains not only source node screenshot, but all rows below too! In the same time drag operation is called only for 1 source and swap in drop handler works fine.

2. Also there is weird error connected woth debuging: when I place breakpoint into the render method of dragSource node and continue running the app I get an error during the drag

Uncaught Error: Cannot call hover after drop.
at invariant (browser.js?72b5:40)
at DragDropManager.hover (dragDrop.js?3115:111)
at Object.eval [as hover] (DragDropManager.js?b07f:92)
at HTML5Backend.handleTopDragEnter (HTML5Backend.js?5f50:495)

But issue with dragPreview described above disappears and drag-drop works fine (one time). Then somewhere after drop event 'Cannot call beginDrag while dragging' error occurs and drag stops to work at all.

Uncaught Error: Cannot call beginDrag while dragging.
at invariant (browser.js?72b5:40)
at DragDropManager.beginDrag (dragDrop.js?3115:50)
at Object.eval [as beginDrag] (DragDropManager.js?b07f:92)
at HTML5Backend.handleTopDragStart (HTML5Backend.js?5f50:361)

Bug appears only in Chrome (57 and 59). Any ideas?

[kaiomagalhaes]

@tTwisTt I'm facing this exactly issue, did you figure out the fix?

[tTwisTt]

@kaiomagalhaes In my case I was getting this issue due one of child element of row (cell content) in fact had height that was greater than row height, but was hidden by visibility: hidden in css. So dragSource had width of rows and height of hidden control. I hope you'll find this helpful.

[matthiaskrieft]

@tTwisTt I can confirm that, same happens with overflow: hidden. is there a way to drag elements like these without the wrong preview?

[canastro]

This issue is closed, but it seems to still be a issue, shouldn't it be reopened?

[olee]

I also have this same issue - when I start dragging the preview is too large and does not respect parts which should be hidden by overflow.
Here you can see how I drag an element but the "border" left next to it is part of the preview as well.

EDIT: I was able to fix it by not using a relative positioned image in the element but instead a div with a background image instead.
So it seems the inner img element reaching out of the parent caused the problem.

[willbuckingham]

I experienced a similar issue when I try and drag a div wrapped material ui Expansion Panel that is collapsed, it ends up giving me a preview that is the height of the panel expanded but includes elements from the page around the panel, since the visible portion of the panel is smaller than the preview.

[RahulRameshNarayan]

i resolved this issue on chrome by adding transform: translate3d(0, 0, 0) to my containing element.

[jsyvino]

@RahulRameshNarayan this also worked for me. THANK YOU!
Any idea why this fixes the issue??

[RahulRameshNarayan]

@jsyvino its a repaint issue on chrome. translate3d forces better hardware acceleration on that element. This is also a hack that people use to solve flickering of scrolling elements in screens of higher resolutions. you can read further about this topics in the following articles.

Let's Play With Hardware-Accelerated CSS-
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/

Accelerated Rendering in Chrome
https://www.html5rocks.com/en/tutorials/speed/layers/

Simplify Paint Complexity and Reduce Paint Areas
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

[makr11]

transform3d(0,0,0) fixes issue of whole page screenshot but has wrong position of an element.

This problem is only on chromium based browsers.
Did anyone had similar issues and how did you fix it?

[mismith]

I'm also getting this issue on Chrome 75 when using a Material-UI ListItem as the draggable node. I think the Ripple element that is contained by overflow: hidden is what's causing the sizing mismatch.

As @makr11 mentions, @RahulRameshNarayan's fix does somehow solve this (by hiding the surrounding elements from the drag preview, seemingly), it does still have the position offset that it would as if those elements were visible, so it's still 'broken' in my opinion.

Does anyone understand what the underlying issue is here, seemingly at the DOM or Native/HTML5 drag preview generation level maybe? Would love to tackle fixing this properly.

[faraonkicu]

Same here, i'm getting this issue on Chrome 75, on Firefox works fine... This should be reopened!

[makr11]

My use case is specific but maybe it will help someone, I use velocity-dashboard which uses react-dnd, and inside widgets (which is a draggable component) is rendered react-chart-js. The problem happened when chart-js was rendered inside widget. I just set that when widget is draggable, basic div is rendered inside widget and not chart-js component.

Again, it's pretty specific and i'm not an expert for the subject but maybe this will help someone.

[artem-tkachenko]

Issue still reproduced (Chrome 75.0.3770.100 )but resolves by adding transform: translate3d(0) to contain element. Thanks @RahulRameshNarayan

[whois42]

I'm also experiencing the same trouble. I tried to solve it by adding transform: translate3d(0, 0, 0), but have the same issue as @makr11 here: #832 (comment)

[idMolotov]

Issue is still presence in the:
Safari 13.0.1
Chrome 80

transform: translate3d(0, 0, 0) helps, but can affect on other styles/elements in your interface.

[dotbear]

@mismith I am struggling with exactly this problem (also using MUI ListItem), did you come up with a solution?

[mismith]

@dotbear Sadly no, I am just living with it :(

[acroyear]

I agree this issue should not be closed without an official workaround that avoids the giant offset problem.

[Kroeg93]

Any news refering to this problem?

[tanmoyAtb]

This issue is still an open problem. It should really be re opened!

[ffjanhoeck]

Any updates here ? This issue still exists

[pwyssmuller]

Same here. transform: translate3d(0, 0, 0) works in Chrome but not in Safari

[mubbahser]

I resolved this bug by disabling Ripple effect of material UI.
disableRipple
disableFocusRipple
disableTouchRipple

[lightandbright]

<ListItemButton disableRipple={true}> worked for me

[edcaron]

from: #1608 (comment)

I ran into this issue, and in my case it ended up being bad css, I had a child element with a height greater than the parent element.

Steps to reproduce:

• create a draggable element with dimensions 200x200
• create a child of that element with dimensions 200x600
• the result will be an element that appears to be 200x200, but the drag preview image will be 200x600

Hope this helps some people

That worked for me. I had an child element bigger than the drag ref parent so the size when dragging was the size of the biggest (the child).

TL;DR: Child elements must not be bigger than the drag ref

[jsduffy]

This issue seems like it's still present. Adding transform: translate3d(0, 0, 0) to the parent container fixed in Chrome... but is that it? Seems like this isn't completely resolved.

[seanconnollydev]

Setting position: relative; on the drag preview's parent element fixed this for me.

[focomoso]

Want to second that this is an issue on Chrome 119.0.6045.199 and using transform: translate3d(0, 0, 0) is not an option for us because of the way we use transforms in the draggable card itself.

Specifically, we have a Three.js canvas that sometimes draws HTML elements "offscreen" which are clipped with overflow: 'hidden' which cause the preview to be larger than it should.