fix: fix offsetParent with willChange #711

daybrush · Aug 3, 2022 · cd1de86 · cd1de86
1 parent 4f04200
commit cd1de86
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx
@@ -143,9 +143,15 @@ export function getOffsetInfo(
         const style = getComputedStyle(target);
         const tagName = target.tagName.toLowerCase();
         const transform = getElementTransform(target as SVGElement, style);
+        const willChange = style.willChange;
         position = style.position!;
 
-        if (tagName === "svg" || position !== "static" || (transform && transform !== "none")) {
+        if (
+            tagName === "svg"
+            || position !== "static"
+            || (transform && transform !== "none")
+            || willChange === "transform"
+        ) {
             break;
         }
         const parentNode = target.parentNode;

diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -41,3 +41,7 @@ group.add("Test flex element", {
     app: require("./ReactFlexApp").default,
     text: require("!!raw-loader!./ReactFlexApp").default,
 });
+group.add("Test Container with will change", {
+    app: require("./ReactWillChangeApp").default,
+    text: require("!!raw-loader!./ReactWillChangeApp").default,
+});
diff --git a/packages/react-moveable/stories/99-Tests/ReactWillChangeApp.tsx b/packages/react-moveable/stories/99-Tests/ReactWillChangeApp.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    return <div className="no-container">
+        <div className="will-change-container">
+            {/* <div className="will-change-inner"> */}
+                <div className="will-change-target">Target1</div>
+            {/* </div> */}
+        </div>
+        <Moveable
+            target={".will-change-target"}
+            draggable={true}
+            preventClickDefault={true}
+            onDrag={e => {
+                e.target.style.transform = e.transform;
+            }}
+        />
+    </div>;
+}
diff --git a/packages/react-moveable/stories/templates/default.css b/packages/react-moveable/stories/templates/default.css
@@ -14,6 +14,23 @@ html, body {
     position: relative;
     margin-top: 50px;
 }
+.will-change-container {
+    padding-left: 100px;
+    padding-top: 100px;
+    will-change: transform;
+}
+.will-change-target {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    background: #ee8;
+    color: #333;
+    font-weight: bold;
+    border: 1px solid #333;
+    box-sizing: border-box;
+}
 .target {
     position: absolute;
     width: 100px;