React-dnd: DragPreview errado no Chrome

@tTwisTt Estou enfrentando exatamente esse problema, você descobriu a solução?

@kaiomagalhaes No meu caso eu estava tendo esse problema devido a um elemento filho da linha (conteúdo da célula) na verdade ter uma altura maior que a altura da linha, mas estava oculto pela visibilidade: escondido no css. Portanto, dragSource tinha largura de linhas e altura de controle oculto. Espero que você ache isso útil.

@tTwisTt Posso confirmar que, o mesmo acontece com overflow: hidden. existe uma maneira de arrastar elementos como esses sem a visualização errada?

Este problema foi encerrado, mas parece que ainda existe, não deveria ser reaberto?

Eu também tenho o mesmo problema - quando eu começo a arrastar a visualização é muito grande e não respeita as partes que deveriam estar escondidas por estouro.
Aqui você pode ver como arrasto um elemento, mas a "borda" à esquerda ao lado dele também faz parte da visualização.

EDIT: Consegui consertar não usando uma imagem posicionada relativa no elemento, mas em vez disso, um div com uma imagem de fundo.
Portanto, parece que o elemento interno img saindo do pai causou o problema.

Eu experimentei um problema semelhante quando tento e arrasto um painel de expansão de ui de material embrulhado div que está recolhido, ele acaba me dando uma visualização que é a altura do painel expandido, mas inclui elementos da página ao redor do painel, desde a parte visível do painel é menor do que a visualização.

Resolvi esse problema no cromo adicionando transform: translate3d (0, 0, 0) ao meu elemento contido.

@RahulRameshNarayan isso também funcionou para mim. OBRIGADA!
Alguma ideia de por que isso resolve o problema ??

@jsyvino é um problema de repintura no cromo. translate3d força uma melhor aceleração de hardware nesse elemento. Este também é um hack que as pessoas usam para resolver a cintilação de elementos de rolagem em telas de resoluções mais altas. você pode ler mais sobre esses tópicos nos artigos a seguir.

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

Renderização acelerada no Chrome
https://www.html5rocks.com/en/tutorials/speed/layers/

Simplifique a complexidade da pintura e reduza as áreas de pintura
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

O transform3d (0,0,0) corrige o problema da captura de tela da página inteira, mas apresenta a posição incorreta de um elemento.

Esse problema ocorre apenas em navegadores baseados em cromo.
Alguém teve problemas semelhantes e como você os corrigiu?

Também estou tendo esse problema no Chrome 75 ao usar um ListItem de IU de material como o nó arrastável. Acho que o elemento Ripple que está contido por overflow: hidden é o que está causando a incompatibilidade de dimensionamento.

Como @ makr11 menciona, a correção de @RahulRameshNarayan de alguma forma resolve isso (ocultando os elementos ao redor da visualização do arrasto, aparentemente), ainda tem o deslocamento de posição que teria como se esses elementos estivessem visíveis, então ainda está 'quebrado ' Na minha opinião.

Alguém entende qual é o problema subjacente aqui, aparentemente no nível de geração de visualização de arrasto DOM ou Nativo / HTML5, talvez? Adoraria consertar isso corretamente.

Mesmo aqui, estou recebendo esse problema no Chrome 75, no Firefox funciona bem ... Isso deve ser reaberto!

Meu caso de uso é específico, mas talvez ajude alguém, eu uso o velocity-dashboard que usa react-dnd, e widgets dentro (que é um componente arrastável) é renderizado react-chart-js. O problema aconteceu quando chart-js foi renderizado dentro do widget. Acabei de definir que, quando o widget é arrastável, o div básico é renderizado dentro do widget e não no componente chart-js.

Novamente, é muito específico e eu não sou um especialista no assunto, mas talvez isso ajude alguém.

O problema ainda é reproduzido (Chrome 75.0.3770.100), mas é resolvido adicionando transform: translate3d (0) para conter o elemento. Obrigado @RahulRameshNarayan

Também estou tendo o mesmo problema. Tentei resolvê-lo adicionando transform: translate3d(0, 0, 0) , mas tenho o mesmo problema de @ makr11 aqui: https://github.com/react-dnd/react-dnd/issues/832#issuecomment -501292272

O problema ainda está presente no:
Safari 13.0.1
Chrome 80

transform: translate3d(0, 0, 0) ajuda, mas pode afetar outros estilos / elementos em sua interface.

@mismith Estou lutando exatamente com esse problema (também usando o MUI ListItem), você encontrou uma solução?

@dotbear Infelizmente não, estou apenas vivendo com isso :(

Concordo que esse problema não deve ser resolvido sem uma solução alternativa oficial que evite o problema da compensação gigante.

Alguma notícia referente a este problema?