React-dnd: ChromeのdragPreviewが間違っています

@tTwisTt私はまさにこの問題に直面しています、あなたは修正を理解しましたか？

@kaiomagalhaes私の場合、行の子要素（セルコンテンツ）の1つが実際には行の高さよりも高い高さを持っていたが、可視性によって隠されていたためにこの問題が発生していました：cssに隠されています。 したがって、dragSourceには、行の幅と非表示のコントロールの高さがありました。 これがお役に立てば幸いです。

@tTwisTt確認できますが、オーバーフローでも同じことが起こります：非表示。 間違ったプレビューなしでこれらのような要素をドラッグする方法はありますか？

この問題はクローズされていますが、まだ問題のようです。再開する必要がありますか？

私もこれと同じ問題を抱えています-ドラッグを開始すると、プレビューが大きすぎて、オーバーフローによって隠されるべき部分を尊重しません。
ここでは、要素をドラッグする方法を確認できますが、その横にある「境界線」もプレビューの一部です。

編集：要素内の相対位置の画像ではなく、代わりに背景画像のあるdivを使用することで修正できました。
したがって、親から手を伸ばす内側のimg要素が問題を引き起こしたようです。

折りたたまれたdivラップされたマテリアルUI拡張パネルをドラッグしようとすると、同様の問題が発生しました。表示されている部分があるため、展開されたパネルの高さであるが、パネルの周りのページの要素を含むプレビューが表示されます。パネルのはプレビューよりも小さいです。

含まれている要素にtransform：translate3d（0、0、0）を追加することで、Chromeでこの問題を解決しました。

@RahulRameshNarayanこれも私のために働いた。 ありがとう！
これで問題が解決する理由はありますか？

@jsyvinoはクロムの塗り直しの問題です。 translate3dは、その要素でより優れたハードウェアアクセラレーションを強制します。 これは、高解像度の画面でスクロール要素のちらつきを解決するために人々が使用するハックでもあります。 このトピックについては、次の記事でさらに読むことができます。

ハードウェアアクセラレーションCSSで遊ぼう-
https://www.smashingmagazine.com/2012/06/play-with-hardware-accelerated-css/

Chromeでの高速レンダリング
https://www.html5rocks.com/en/tutorials/speed/layers/

ペイントの複雑さを簡素化し、ペイント領域を削減します
https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas

transform3d（0,0,0）は、ページ全体のスクリーンショットの問題を修正しますが、要素の位置が間違っています。

この問題は、クロムベースのブラウザでのみ発生します。
誰かが同様の問題を抱えていましたか、そしてどのようにそれを修正しましたか？

ドラッグ可能なノードとしてMaterial-UIListItemを使用すると、Chrome75でもこの問題が発生します。 オーバーフローに含まれているRipple要素：hiddenが、サイズの不一致の原因であると思います。

@ makr11は述べているように、@RahulRameshNarayanの修正が何らかの形で（一見、ドラッグプレビューから、周囲の要素を非表示にすることで、）これを解決ん、それはまだ位置がオフセットしているんということでしょう、それはまだですので、これらの要素は、表示されていたかのように「壊れました' 私の意見では。

DOMまたはNative / HTML5ドラッグプレビュー生成レベルのように見える、根本的な問題がここにあることを誰かが理解していますか？ これを適切に修正することに取り組みたいと思います。

ここでも同じですが、Chrome 75でこの問題が発生し、Firefoxでは正常に動作します...これを再度開く必要があります。

私のユースケースは具体的ですが、誰かを助けるかもしれません。react-dndを使用するvelocity-dashboardを使用し、ウィジェット内（ドラッグ可能なコンポーネント）はreact-chart-jsにレンダリングされます。 この問題は、chart-jsがウィジェット内でレンダリングされたときに発生しました。 ウィジェットがドラッグ可能の場合、基本的なdivはchart-jsコンポーネントではなく、ウィジェット内にレンダリングされるように設定しました。

繰り返しますが、それはかなり具体的であり、私は主題の専門家ではありませんが、おそらくこれは誰かを助けるでしょう。

問題はまだ再現されていますが（Chrome 75.0.3770.100）、要素を含むようにtransform：translate3d（0）を追加することで解決します。 ありがとう@RahulRameshNarayan

私も同じ問題を抱えています。 transform: translate3d(0, 0, 0)追加して解決しようとしましたが、 @ makr11と同じ問題があります： https ：

問題はまだ存在しています：
Safari 13.0.1
Chrome 80

transform: translate3d(0, 0, 0)は役立ちますが、インターフェースの他のスタイル/要素に影響を与える可能性があります。

@mismith私はまさにこの問題に苦労しています（MUI ListItemも使用しています）、解決策を思いつきましたか？

@dotbear悲しいことに、私はそれと一緒に住んでいます:(

私は、巨大なオフセット問題を回避する公式の回避策なしにこの問題を解決すべきではないことに同意します。

この問題に言及しているニュースはありますか？