React-dnd: Mauvais glisserAperçu dans Chrome

@tTwisTt Je suis exactement confronté à ce problème, avez-vous

@kaiomagalhaes Dans mon cas, j'avais ce problème car l'un des éléments enfants de la ligne (contenu de la cellule) avait en fait une hauteur supérieure à la hauteur de la ligne, mais était masqué par la visibilité: masqué en css. Donc, dragSource avait la largeur des lignes et la hauteur du contrôle caché. J'espère que vous trouverez cela utile.

@tTwisTt Je peux confirmer que la même chose se produit avec le débordement : caché. existe-t-il un moyen de faire glisser des éléments comme ceux-ci sans un mauvais aperçu ?

Ce problème est clos, mais il semble toujours être un problème, ne devrait-il pas être rouvert ?

J'ai également le même problème - lorsque je commence à faire glisser, l'aperçu est trop grand et ne respecte pas les parties qui devraient être masquées par débordement.
Ici, vous pouvez voir comment je fais glisser un élément, mais la "bordure" laissée à côté fait également partie de l'aperçu.

EDIT: J'ai pu le corriger en n'utilisant pas d'image positionnée de manière relative dans l'élément mais à la place un div avec une image d'arrière-plan.
Il semble donc que l'élément img interne sortant du parent ait causé le problème.

J'ai rencontré un problème similaire lorsque j'essaie de faire glisser un panneau d'extension ui de matériel enveloppé div qui est réduit, il finit par me donner un aperçu qui correspond à la hauteur du panneau développé mais inclut des éléments de la page autour du panneau, puisque la partie visible du panneau est plus petit que l'aperçu.

J'ai résolu ce problème sur chrome en ajoutant transform: translate3d (0, 0, 0) à mon élément conteneur.

@RahulRameshNarayan, cela a également fonctionné pour moi. MERCI!
Une idée de pourquoi cela résout le problème ??

@jsyvino c'est un problème de repeindre sur chrome. translate3d force une meilleure accélération matérielle sur cet élément. C'est également un hack que les gens utilisent pour résoudre le scintillement des éléments de défilement dans les écrans de résolutions plus élevées. vous pouvez en savoir plus sur ces sujets dans les articles suivants.

Jouons avec le CSS à accélération matérielle-
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/

Rendu accéléré dans Chrome
https://www.html5rocks.com/en/tutorials/speed/layers/

Simplifiez la complexité de la peinture et réduisez les zones de peinture
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

transform3d(0,0,0) corrige le problème de capture d'écran de la page entière mais a une mauvaise position d'un élément.

Ce problème ne concerne que les navigateurs à base de chrome.
Quelqu'un a-t-il eu des problèmes similaires et comment les avez-vous résolus ?

Je rencontre également ce problème sur Chrome 75 lors de l'utilisation d'un élément de liste Material-UI en tant que nœud déplaçable. Je pense que l'élément Ripple qui est contenu par débordement : caché est ce qui cause l'incompatibilité de dimensionnement.

Comme @makr11 le mentionne, le correctif de

Est-ce que quelqu'un comprend quel est le problème sous-jacent ici, apparemment au niveau de la génération de prévisualisation de glissement DOM ou Native/HTML5 peut-être ? J'adorerais m'attaquer à ce problème correctement.

Idem ici, j'ai ce problème sur Chrome 75, sur Firefox ça marche bien... Cela devrait être rouvert !

Mon cas d'utilisation est spécifique mais peut-être que cela aidera quelqu'un, j'utilise le speed-dashboard qui utilise react-dnd, et à l'intérieur des widgets (qui est un composant déplaçable) est rendu react-chart-js. Le problème s'est produit lorsque chart-js a été rendu dans le widget. Je viens de définir que lorsque le widget est déplaçable, la div de base est rendue dans le widget et non dans le composant chart-js.

Encore une fois, c'est assez précis et je ne suis pas un expert en la matière, mais peut-être que cela aidera quelqu'un.

Problème toujours reproduit (Chrome 75.0.3770.100) mais résolu en ajoutant la transformation : translate3d(0) pour contenir l'élément. Merci @RahulRameshNarayan

Je rencontre également le même problème. J'ai essayé de le résoudre en ajoutant transform: translate3d(0, 0, 0) , mais j'ai le même problème que @makr11 ici : https://github.com/react-dnd/react-dnd/issues/832#issuecomment -501292272

Le problème est toujours présent dans :
Safari 13.0.1
Chrome 80

transform: translate3d(0, 0, 0) aide, mais peut affecter d'autres styles/éléments de votre interface.

@mismith Je suis aux prises avec exactement ce problème (en utilisant également MUI ListItem), avez-vous trouvé une solution?

@dotbear Malheureusement non, je vis juste avec :(

Je suis d'accord que ce problème ne doit pas être fermé sans une solution de contournement officielle qui évite le problème de décalage géant.

Des nouvelles concernant ce problème ?