nicht angemeldet
der Drag von Rechteck 2 ist kaputt, hier habe ich keinen Transform notiert und Chrome zeigt nicht das div 2, sondern den Bildschirmausschnitt des Bereichs, wo div 2 lag
Eigentlich hast Du die Antwort schon selbst herausgefunden.
1.a) Den Pseudo-Transform vor den speziellen Regeln pauschal für alle „draggablen“ machen
*[draggable=true] {
transform: rotate(0deg);
}
1.b) Variante: Das angeklickte Element nach vorn zu holen sorgt dafür, dass das von Chromium bei Verschieben gezeigte „Bildschirmfoto“ keine „Fremdinhalte“ zeigt:
*[draggable=true]:active {
z-index:99999;
}
Du kannst noch Klassen einbauen wenn Du nicht willst, das der Browser eine Stunde lang damit befasst ist, einer Quantillion von Objekten die Eigenschaften zuzuweisen und diese zu überwachen…
Ich hoffe, das stimmt so. Im Fiddle hat es „getan“. Ob das wohl Gunnar genügt?
2.) Als Bug verpetzen. https://support.google.com/chrome/answer/95315
Rechteck 3 enthält einen Transform. Der Drag zeigt das korrekte Rechteck ohne Artefakte von Rechteck 4, ABER Chrome macht bei mir eine Art radialen Transparenzgradienten auf das Drag-Bild. Da wo die Maus beim Dragstart war, ist das Element voll sichtbar, je weiter weg davon, desto transparenter wird es.
Ich sehe davon in Chrome - Version 109.0.5414.10 (Entwickler-Build) Ubuntu 22.04 (64-Bit) - nichts. Und das obwohl ich den Bereich fast auf Full-HD aufgezogen habe. Allerdings haben die Objekte beim Verschieben einen sehr breiten, durchscheinenden Rand. Womöglich soll das aber so sein.
Frohes Fest!
Rolf B
JürgenB