React-dnd: Falsche DragPreview in Chrome

@tTwisTt Ich

@kaiomagalhaes In meinem Fall bekam ich dieses Problem, weil eines der

@tTwisTt Das kann ich bestätigen, das gleiche passiert mit overflow: hidden. Gibt es eine Möglichkeit, solche Elemente ohne die falsche Vorschau zu ziehen?

Dieses Problem ist geschlossen, aber es scheint immer noch ein Problem zu sein, sollte es nicht wieder geöffnet werden?

Ich habe auch das gleiche Problem - wenn ich mit dem Ziehen beginne, ist die Vorschau zu groß und berücksichtigt nicht Teile, die durch Überlauf ausgeblendet werden sollten.
Hier sehen Sie, wie ich ein Element ziehe, aber der "Rahmen" links daneben ist auch Teil der Vorschau.

BEARBEITEN: Ich konnte es beheben, indem ich kein relativ positioniertes Bild im Element verwendet habe, sondern stattdessen ein Div mit einem Hintergrundbild.
Es scheint also, dass das innere img-Element, das aus dem Elternteil herausragt, das Problem verursacht hat.

Ich habe ein ähnliches Problem erlebt, als ich versuche, ein UI-Erweiterungspanel mit div-umhülltem Material zu ziehen, das zusammengeklappt ist des Panels ist kleiner als die Vorschau.

Ich habe dieses Problem in Chrome gelöst, indem ich transform: translate3d (0, 0, 0) zu meinem enthaltenden Element hinzugefügt habe.

@RahulRameshNarayan das hat auch bei mir funktioniert. DANKE SCHÖN!
Irgendeine Idee, warum das das Problem behebt??

@jsyvino ist ein Problem mit der

Spielen wir mit hardwarebeschleunigtem CSS-
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/

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

Vereinfachen Sie die Farbkomplexität und reduzieren Sie Farbflächen
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

transform3d(0,0,0) behebt das Problem des Screenshots der ganzen Seite, hat aber die falsche Position eines Elements.

Dieses Problem tritt nur bei chrombasierten Browsern auf.
Hatte jemand ähnliche Probleme und wie habt ihr es behoben?

Dieses Problem tritt auch bei Chrome 75 auf, wenn ein Material-UI-ListItem als ziehbarer Knoten verwendet wird. Ich denke, das Ripple-Element, das von overflow: hidden enthalten ist, ist das, was die Größenabweichung verursacht.

Wie @makr11 erwähnt, löst der Fix von Ziehvorschau ausblendet ), es hat immer noch den Positionsversatz, den es hätte, als ob diese Elemente sichtbar wären, also ist er immer noch "kaputt". ' meiner Meinung nach.

Versteht jemand, was hier das zugrunde liegende Problem ist, anscheinend auf der Ebene der DOM- oder Native/HTML5-Drag-Preview-Generierung vielleicht? Würde das gerne richtig in Angriff nehmen.

Das gleiche hier, ich bekomme dieses Problem auf Chrome 75, auf Firefox funktioniert gut ... Dies sollte wieder geöffnet werden!

Mein Anwendungsfall ist spezifisch, aber vielleicht hilft es jemandem, ich verwende Velocity-Dashboard, das React-Dnd verwendet, und innerhalb von Widgets (die eine ziehbare Komponente ist) wird React-Chart-Js gerendert. Das Problem trat auf, als chart-js im Widget gerendert wurde. Ich habe nur eingestellt, dass, wenn das Widget verschiebbar ist, das grundlegende Div im Widget und nicht in der chart-js-Komponente gerendert wird.

Auch hier ist es ziemlich spezifisch und ich bin kein Experte für das Thema, aber vielleicht hilft dies jemandem.

Das Problem wird immer noch reproduziert (Chrome 75.0.3770.100), wird jedoch durch Hinzufügen von transform: translate3d(0) behoben, um das Element zu enthalten. Danke @RahulRameshNarayan

Ich habe auch das gleiche Problem. Ich habe versucht, es zu lösen, indem ich transform: translate3d(0, 0, 0) hinzugefügt habe, habe aber das gleiche Problem wie @makr11 hier: https://github.com/react-dnd/react-dnd/issues/832#issuecomment -501292272

Problem ist immer noch vorhanden in:
Safari 13.0.1
Chrom 80

transform: translate3d(0, 0, 0) hilft, kann sich aber auf andere Stile/Elemente in Ihrer Benutzeroberfläche auswirken.

@mismith Ich kämpfe mit genau diesem Problem (auch mit MUI ListItem), haben Sie eine Lösung gefunden?

@dotbear Leider nein, ich lebe nur damit :(

Ich stimme zu, dass dieses Problem nicht ohne eine offizielle Problemumgehung geschlossen werden sollte, die das riesige Offset-Problem vermeidet.

Gibt es Neuigkeiten zu diesem Problem?