From be9ee981fbea631cdf8d7bd40d814d02b46a22c2 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Thu, 23 Dec 2021 13:16:21 -0800
Subject: [PATCH] dragging clipp fix part II

* #1902 change caused a flicker when item goes posision:fixed, so make sure we position on screen during init as well.
---
 src/h5/dd-draggable.ts | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts
index db5721f51..8899a44dc 100644
--- a/src/h5/dd-draggable.ts
+++ b/src/h5/dd-draggable.ts
@@ -211,16 +211,20 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   private _setupHelperStyle(): DDDraggable {
     // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
-    this.helper.style.pointerEvents = 'none';
-    this.helper.style.width = this.dragOffset.width + 'px';
-    this.helper.style.height = this.dragOffset.height + 'px';
-    this.helper.style.willChange = 'left, top';
-    this.helper.style.transition = 'none'; // show up instantly
-    this.helper.style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
-    this.helper.style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)
+    const rec = this.helper.getBoundingClientRect();
+    const style = this.helper.style;
+    style.pointerEvents = 'none';
+    style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)
+    style.width = this.dragOffset.width + 'px';
+    style.height = this.dragOffset.height + 'px';
+    style.willChange = 'left, top';
+    style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
+    style.left = rec.left + 'px';
+    style.top = rec.top + 'px';
+    style.transition = 'none'; // show up instantly
     setTimeout(() => {
       if (this.helper) {
-        this.helper.style.transition = null; // recover animation
+        style.transition = null; // recover animation
       }
     }, 0);
     return this;