diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx index 9cb5f249c..acfe47c9d 100644 --- 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 index fbecc4e48..708724431 100644 --- 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 new file mode 100644 index 000000000..c6d53e8df --- /dev/null +++ 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