wip

src/view/draggable-dimension-publisher/draggable-dimension-publisher.jsx

@@ -96,7 +96,29 @@ export default class DraggableDimensionPublisher extends Component<Props> {
 
     const computedStyles: CSSStyleDeclaration = window.getComputedStyle(targetRef);
 
-    const client: BoxModel = calculateBox(targetRef.getBoundingClientRect(), computedStyles);
+    // Capturing borderBox without transforms or top / left positioning
+    // Fingers crossed that this does not cause any flashing
+    // TODO: anyway to unwind just the ones we care about?
+    const previous = {
+      transform: computedStyles.transform,
+      // transition: computedStyles.transition,
+      // top: computedStyles.top,
+      // left: computedStyles.left,
+    };
+
+    targetRef.style.transform = 'none';
+    // targetRef.style.transition = 'none';
+    // targetRef.style.top = '0px';
+    // targetRef.style.left = '0px';
+    const borderBox: ClientRect = targetRef.getBoundingClientRect();
+    // targetRef.style.transition = previous.transition;
+    targetRef.style.transform = previous.transform;
+    targetRef.getBoundingClientRect();
+    // targetRef.style.top = previous.top;
+    // targetRef.style.left = previous.left;
+
+    const client: BoxModel = calculateBox(borderBox, computedStyles);
+
     const page: BoxModel = withScroll(client, getWindowScroll());
 
     const placeholder: Placeholder = {

src/view/draggable/draggable-types.js

@@ -52,7 +52,10 @@ export type DraggingStyle = {|
   // the element positioned with the top/left position (which is margin aware).
   // We also clear the margin right / bottom. This has no positioning impact,
   // but it is cleanest to just remove all the margins rather than only the top and left.
-  margin: 0,
+  marginTop: number,
+  marginRight: number,
+  marginBottom: number,
+  marginLeft: number,
 
   // We need to opt out of the shared global style that is being applied to
   // all draggables. The movement of moving draggables is either not animated

src/view/draggable/draggable.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component, Fragment, type Node } from 'react';
-import { type Position } from 'css-box-model';
+import { type Position, type BoxModel } from 'css-box-model';
 import PropTypes from 'prop-types';
 import memoizeOne from 'memoize-one';
 import invariant from 'tiny-invariant';
@@ -192,20 +192,30 @@ export default class Draggable extends Component<Props> {
     (dimension: DraggableDimension,
       isDropAnimating: boolean,
       movementStyle: MovementStyle): DraggingStyle => {
-      const { width, height, top, left } = dimension.client.borderBox;
+      const box: BoxModel = dimension.client;
+      // const { width, height, top, left } = dimension.client.borderBox;
       // For an explanation of properties see `draggable-types`.
       const style: DraggingStyle = {
-        position: 'fixed',
+        // ## Sizing
+        // Applying the correct border-box sizing
         boxSizing: 'border-box',
+        width: box.borderBox.width,
+        height: box.borderBox.height,
+        // Apply margin so that dimension recapturing will get the same marginBox
+        marginTop: dimension.client.margin.top,
+        marginRight: dimension.client.margin.right,
+        marginBottom: dimension.client.margin.bottom,
+        marginLeft: dimension.client.margin.left,
+        // ## Placement
+        // As we are applying the margins we need to align to the start of the marginBox
+        top: box.marginBox.top,
+        left: box.marginBox.left,
         zIndex: isDropAnimating ? zIndexOptions.dropAnimating : zIndexOptions.dragging,
-        width,
-        height,
-        top,
-        left,
-        margin: 0,
-        pointerEvents: 'none',
         transition: 'none',
         transform: movementStyle.transform ? `${movementStyle.transform}` : null,
+        position: 'fixed',
+        // ## Performance
+        pointerEvents: 'none',
       };
       return style;
     }