React-dnd: Ghost-Element wird in Chrome 50 sehr uneinheitlich angezeigt

Nach dem Update von Chrome auf 50 haben die meisten reaktionsfähigen und ziehbaren Elemente in unserer App Probleme mit Geisterelementen, und ich kann die Hauptursache nicht genau bestimmen (und habe keinen öffentlichen Link zum Administrator unserer App die ich zur Verfügung stellen kann). Das anfängliche Verhalten, das zuvor gut funktioniert hat, ist, dass beim Ziehen eines Elements ein Geisterelement angezeigt wurde, während das Quellelement ausgeblendet war.

Es gibt 6 verschiedene Komponenten unserer App, die mit react-dnd gezogen werden können. 2 von ihnen zeigen Geister ganz gut an, 3 von ihnen zeigen überhaupt keine Geister und 1 von ihnen zeigt irgendwie das Element in der richtigen Breite / Höhe, aber ohne Inhalt und mit weißem Hintergrund.

Hier ist die Liste der Hinweise, die ich bisher gefunden habe:

• Alle Komponenten verwenden ein Drag-Handle-Element mit einem übergeordneten Element als Vorschau
• Alle Komponenten (mit Ausnahme der Komponente, die weiß wird) fügen dem Vorschauelement einen Inline- Deckkraftstil: 0 hinzu , wenn monitor.isDragging () true ist
• Wenn ich die bedingte Deckkraft: 0- Logik entferne, kann ich die Geister sehen, aber das Quellelement ist immer sichtbar, was nicht akzeptabel ist
• Hier ist eine seltsame. Für 2 der Komponenten wird dies durch Hinzufügen von z- index: 1 vollständig behoben. Ich kann den Geist sehen und die Quellkomponente ist versteckt. Bei den anderen 2 defekten Komponenten wurde das Problem dadurch nicht behoben. Bisher gab es für diese Komponenten keine Z-Index-Regel oder Stapelprobleme.
• Das führte mich zu dem Schluss, dass es möglicherweise eine CSS-Kombination gibt, die den Browser zu der Annahme veranlasst, dass die Quellkomponente beim Dragstart nicht sichtbar ist, und somit keinen Geist erzeugt. Ich habe versucht, alle Arten von CSS-Werten zu entfernen / zu ändern und nichts.
• Dies funktionierte definitiv, bevor Chrome auf 50 aktualisiert wurde.