React-dnd: Неправильное перетаскиваниеПредварительный просмотр в Chrome

@tTwisTt Я столкнулся с этой проблемой, вы

@kaiomagalhaes В моем случае у меня

@tTwisTt Я могу подтвердить, что то же самое происходит с overflow: hidden. есть ли способ перетаскивать такие элементы без неправильного предварительного просмотра?

Этот вопрос закрыт, но, похоже, он все еще остается проблемой, не следует ли открывать его повторно?

У меня также есть такая же проблема - когда я начинаю перетаскивать предварительный просмотр, он слишком велик и не учитывает части, которые должны быть скрыты из-за переполнения.
Здесь вы можете увидеть, как я перетаскиваю элемент, но «граница», оставленная рядом с ним, также является частью предварительного просмотра.

РЕДАКТИРОВАТЬ: я смог исправить это, не используя изображение с относительным позиционированием в элементе, а вместо этого div с фоновым изображением.
Таким образом, кажется, что внутренний элемент img, выходящий из родительского элемента, вызвал проблему.

У меня возникла аналогичная проблема, когда я пытаюсь перетащить обернутый div материал ui Expansion Panel, который свернут, в конечном итоге он дает мне предварительный просмотр, который является высотой развернутой панели, но включает элементы со страницы вокруг панели, поскольку видимая часть панели меньше, чем предварительный просмотр.

Я решил эту проблему в Chrome, добавив transform: translate3d (0, 0, 0) в мой содержащий элемент.

@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) устраняет проблему со снимком экрана всей страницы, но имеет неправильное положение элемента.

Эта проблема возникает только в браузерах на основе хрома.
Были ли у кого-нибудь подобные проблемы и как вы их исправляли?

У меня также возникает эта проблема в Chrome 75 при использовании элемента ListItem в пользовательском интерфейсе материала в качестве перетаскиваемого узла. Я думаю, что элемент Ripple, содержащийся в overflow: hidden, является причиной несоответствия размеров.

Как упоминает @ makr11 , исправление @RahulRameshNarayan каким-то образом решает эту проблему (по-видимому, скрывая окружающие элементы от предварительного просмотра перетаскивания), у него все еще есть смещение позиции, которое было бы так, как если бы эти элементы были видимыми, поэтому оно все еще `` сломано '' ' по моему мнению.

Кто-нибудь понимает, в чем заключается основная проблема, возможно, на уровне генерации предварительного просмотра перетаскивания DOM или Native / HTML5? Хотелось бы заняться исправлением этого должным образом.

То же самое, я получаю эту проблему в Chrome 75, в Firefox все работает нормально ... Это нужно снова открыть!

Мой вариант использования специфичен, но, возможно, он кому-то поможет, я использую панель управления скоростью, которая использует response-dnd, а внутри виджетов (который является перетаскиваемым компонентом) отображается react-chart-js. Проблема возникла, когда chart-js был отрисован внутри виджета. Я просто установил, что, когда виджет перетаскивается, базовый div отображается внутри виджета, а не в компоненте chart-js.

Опять же, это довольно специфично, и я не эксперт в этом предмете, но, возможно, это кому-то поможет.

Проблема все еще воспроизводится (Chrome 75.0.3770.100), но решается путем добавления transform: translate3d (0) для включения element. Спасибо @RahulRameshNarayan

У меня тоже такая же проблема. Я попытался решить эту проблему, добавив transform: translate3d(0, 0, 0) , но возникла та же проблема, что и у https://github.com/react-dnd/react-dnd/issues/832#issuecomment -501292272

Проблема все еще присутствует в:
Safari 13.0.1
Хром 80

transform: translate3d(0, 0, 0) помогает, но может повлиять на другие стили / элементы вашего интерфейса.

@mismith Я

@dotbear К сожалению, нет, я просто живу с этим :(

Я согласен, что эту проблему не следует закрывать без официального решения, позволяющего избежать проблемы гигантского смещения.

Есть новости, относящиеся к этой проблеме?