React-dnd: Vista previa incorrecta de arrastre en Chrome

@tTwisTt Me estoy enfrentando exactamente a este problema, ¿descubriste la solución?

@kaiomagalhaes En mi caso, recibí este problema debido a que uno de los elementos secundarios de la fila (contenido de la celda) de hecho tenía una altura mayor que la altura de la fila, pero estaba oculta por la visibilidad: oculta en css. Así que dragSource tenía un ancho de filas y un alto de control oculto. Espero que le resulte útil.

@tTwisTt Puedo confirmar que, lo mismo sucede con overflow: hidden. ¿Hay alguna forma de arrastrar elementos como estos sin la vista previa incorrecta?

Este problema está cerrado, pero parece que sigue siendo un problema, ¿no debería reabrirse?

También tengo el mismo problema: cuando comienzo a arrastrar, la vista previa es demasiado grande y no respeta las partes que deberían estar ocultas por el desbordamiento.
Aquí puede ver cómo arrastro un elemento, pero el "borde" que queda junto a él también forma parte de la vista previa.

EDITAR: Pude solucionarlo al no usar una imagen de posición relativa en el elemento, sino un div con una imagen de fondo.
Entonces, parece que el elemento img interno que se extiende desde el padre causó el problema.

Experimenté un problema similar cuando intento arrastrar un panel de expansión de interfaz de usuario de material envuelto en div que está colapsado, termina dándome una vista previa que es la altura del panel expandido pero incluye elementos de la página alrededor del panel, ya que la parte visible del panel es más pequeño que la vista previa.

Resolví este problema en Chrome agregando transform: translate3d (0, 0, 0) a mi elemento contenedor.

@RahulRameshNarayan esto también funcionó para mí. ¡GRACIAS!
¿Alguna idea de por qué esto soluciona el problema?

@jsyvino es un problema de repintado en Chrome. translate3d fuerza una mejor aceleración de hardware en ese elemento. Este también es un truco que la gente usa para resolver el parpadeo de los elementos de desplazamiento en pantallas de mayor resolución. Puede leer más sobre estos temas en los siguientes artículos.

Juguemos con CSS acelerado por hardware
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/

Representación acelerada en Chrome
https://www.html5rocks.com/en/tutorials/speed/layers/

Simplifique la complejidad de la pintura y reduzca las áreas de pintura
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

transform3d (0,0,0) corrige el problema de la captura de pantalla de toda la página pero tiene la posición incorrecta de un elemento.

Este problema es solo en navegadores basados ​​en cromo.
¿Alguien tuvo problemas similares y cómo lo solucionó?

También recibo este problema en Chrome 75 cuando uso un Material-UI ListItem como nodo arrastrable. Creo que el elemento Ripple contenido por overflow: hidden es lo que está causando el desajuste de tamaño.

Como menciona @ makr11 , la solución de

¿Alguien entiende cuál es el problema subyacente aquí, aparentemente en el nivel de generación de vista previa de arrastre DOM o Native / HTML5 tal vez? Me encantaría abordar la solución de esto correctamente.

Lo mismo aquí, tengo este problema en Chrome 75, en Firefox funciona bien ... ¡Esto debería reabrirse!

Mi caso de uso es específico, pero tal vez ayude a alguien, uso velocity-dashboard que usa react-dnd, y dentro de los widgets (que es un componente que se puede arrastrar) se representa react-chart-js. El problema ocurrió cuando se renderizó chart-js dentro del widget. Acabo de configurar que cuando el widget se puede arrastrar, el div básico se representa dentro del widget y no en el componente chart-js.

Nuevamente, es bastante específico y no soy un experto en el tema, pero tal vez esto ayude a alguien.

El problema aún se reproduce (Chrome 75.0.3770.100) pero se resuelve agregando transform: translate3d (0) para contener el elemento. Gracias @RahulRameshNarayan

También estoy experimentando el mismo problema. Intenté resolverlo agregando transform: translate3d(0, 0, 0) , pero tengo el mismo problema que @ makr11 aquí: https://github.com/react-dnd/react-dnd/issues/832#issuecomment -501292272

El problema sigue estando presente en:
Safari 13.0.1
Cromo 80

transform: translate3d(0, 0, 0) ayuda, pero puede afectar a otros estilos / elementos en su interfaz.

@mismith Estoy luchando con exactamente este problema (también usando MUI ListItem), ¿se le ocurrió una solución?

@dotbear Lamentablemente no, solo estoy viviendo con eso :(

Estoy de acuerdo en que este problema no debería cerrarse sin una solución oficial que evite el gran problema de la compensación.

¿Alguna noticia referente a este problema?