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
+
+ {/*
*/} +
Target1
+ {/*
*/} +
+ { + e.target.style.transform = e.transform; + }} + /> +
; +} diff --git a/packages/react-moveable/stories/templates/default.css b/packages/react-moveable/stories/templates/default.css index 40073fb06..ccab07830 100644 --- 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;