search

react-dnd / react-dnd-html5-backend

HTML5 backend for React DnD [Legacy Repo]
MIT License
146 stars 97 forks source link

dragPreview broken on Chrome 50? #28

Closed N1kto closed 8 years ago

N1kto commented 8 years ago

In our application we started to observe issue with dragging item image. Here is how it looks like: no_drag_image

As one can mention outcome items are not drawn at all, while question items are 'screenshotted' without inner text (only grey rectangle).

Reproducible only on Chrome 50 (checked on 50.0.2661.75, on .86 and on .87m) . On FF and Safari all works as expected though... Can it be related to this Chrome 50 commit:

https://chromium.googlesource.com/chromium/src/+/d1e45374111c047fc69c8719434bf14417f74d2e

What can be the way to tackle this issue?

yesmeck commented 8 years ago

Save here.

It seems preview image is created after drag started.

http://stackoverflow.com/questions/30887707/html-drag-drop-setdragimage-doesnt-set-ghost-image-on-first-drag

Chaneg this line to dataTransfer.setDragImage(dragPreview.cloneNode(true), dragPreviewOffset.x, dragPreviewOffset.y); can be a workaround.

N1kto commented 8 years ago

@yesmeck thanks for comment. That didn't work. I think it's something with the way browser (Chrome 50) creates that drag image. That explains why in Chrome 49 and all other browsers all works fine.

N1kto commented 8 years ago

Seems like dedicating a layer to drag preview node (by adding CSS will-change: transform) 'fixes' the issue.

will-change-fix

More and more confident that the issue's root cause comes from mentioned Chrome's commit. Will check with them.

N1kto commented 8 years ago

I'll close it for now.