{"action":"created","issue":{"url":"https://api.github.com/repos/gaearon/react-dnd/issues/267","labels_url":"https://api.github.com/repos/gaearon/react-dnd/issues/267/labels{/name}","comments_url":"https://api.github.com/repos/gaearon/react-dnd/issues/267/comments","events_url":"https://api.github.com/repos/gaearon/react-dnd/issues/267/events","html_url":"https://github.com/gaearon/react-dnd/issues/267","id":101912756,"number":267,"title":"DragPreview is positioned wrong when using translate3d on child nodes","user":{"login":"delijah","id":237739,"avatar_url":"https://avatars.githubusercontent.com/u/237739?v=3","gravatar_id":"","url":"https://api.github.com/users/delijah","html_url":"https://github.com/delijah","followers_url":"https://api.github.com/users/delijah/followers","following_url":"https://api.github.com/users/delijah/following{/other_user}","gists_url":"https://api.github.com/users/delijah/gists{/gist_id}","starred_url":"https://api.github.com/users/delijah/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/delijah/subscriptions","organizations_url":"https://api.github.com/users/delijah/orgs","repos_url":"https://api.github.com/users/delijah/repos","events_url":"https://api.github.com/users/delijah/events{/privacy}","received_events_url":"https://api.github.com/users/delijah/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-08-19T14:54:45Z","updated_at":"2015-09-17T14:51:20Z","closed_at":"2015-09-17T14:51:20Z","body":"Hey!\r\n\r\nWe try to make an element draggable, which contains a translate3d css style at some point. Unfortunately this repositions the whole drag-layer. I do not really understand why, since the translate3d is not on the root element, but on a child node of it.\r\n\r\nI assembled a very simple example, showing the problem to you. (To make it work, you need to place the ReactDnD.min.js in the \"./scripts/react-dnd-1.1.4/dist\" folder, since i did not find any CDN that hosts ReactDnD).\r\n\r\nThanks for help!\r\n\r\n    <!DOCTYPE html>\r\n    <html>\r\n        <head>\r\n            <meta charset=\"UTF-8\">\r\n            <title>DragPreview with wrong position example</title>\r\n\r\n            <script src=\"http://fb.me/react-with-addons-0.13.3.js\"></script>\r\n            <script src=\"http://fb.me/JSXTransformer-0.13.3.js\"></script>\r\n            <script src=\"scripts/react-dnd-1.1.4/dist/ReactDnD.min.js\"></script>\r\n\r\n            <style>\r\n                .ReactDnDElement {\r\n                    background: red;\r\n                    overflow: hidden;\r\n                    width: 200px;\r\n                    height: 100px;\r\n                }\r\n\r\n                .ReactDnDElement .wrapper {\r\n                    display: flex;\r\n                    align-items: center;\r\n                    width: 600px;\r\n                    height: 100%;\r\n                    transform: translate3d(-275px, 0, 0);\r\n                }\r\n\r\n                .ReactDnDElement .wrapper div {\r\n                    width: 150px;\r\n                    height: 50%;\r\n                }\r\n\r\n                .ReactDnDElement .wrapper div.green { background: green; }\r\n                .ReactDnDElement .wrapper div.blue { background: blue; }\r\n                .ReactDnDElement .wrapper div.yellow { background: yellow; }\r\n                .ReactDnDElement .wrapper div.magenta { background: magenta; }\r\n            </style>\r\n        </head>\r\n\r\n        <body>\r\n            <script type=\"text/jsx\">\r\n                /* ReactDnDApp */\r\n\r\n                var ReactDnDApp = React.createClass({\r\n                    render: function() {\r\n                        return (\r\n                            <ReactDnDElement></ReactDnDElement>\r\n                        );\r\n                    }\r\n                });\r\n\r\n                ReactDnDApp = ReactDnD.DragDropContext(ReactDnD.HTML5)(ReactDnDApp)\r\n\r\n\r\n                /* ReactDnDElement */\r\n\r\n                var ReactDnDElement = React.createClass({\r\n                    render: function() {\r\n                        return this.props.connectDragSource(\r\n                            this.props.connectDragPreview(\r\n                                <div className=\"ReactDnDElement\">\r\n                                    <div className=\"wrapper\">\r\n                                        <div className=\"green\"></div>\r\n                                        <div className=\"blue\"></div>\r\n                                        <div className=\"yellow\"></div>\r\n                                        <div className=\"magenta\"></div>\r\n                                    </div>\r\n                                </div>\r\n                            )\r\n                        );\r\n                    }\r\n                });\r\n\r\n                ReactDnDElement = ReactDnD.DragSource(\"dndElement\", {\r\n                    beginDrag: function(props) {\r\n                        return {};\r\n                    }\r\n                }, function(connect, monitor) {\r\n                    return {\r\n                        connectDragSource: connect.dragSource(),\r\n                        connectDragPreview: connect.dragPreview()\r\n                    };\r\n                })(ReactDnDElement);\r\n\r\n\r\n                /* RUN IT! */\r\n\r\n                React.render(React.createElement(ReactDnDApp), document.body);\r\n            </script>\r\n        </body>\r\n    </html>"},"comment":{"url":"https://api.github.com/repos/gaearon/react-dnd/issues/comments/141111602","html_url":"https://github.com/gaearon/react-dnd/issues/267#issuecomment-141111602","issue_url":"https://api.github.com/repos/gaearon/react-dnd/issues/267","id":141111602,"user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"created_at":"2015-09-17T14:51:20Z","updated_at":"2015-09-17T14:51:20Z","body":"Nasty stuff. I just spent two hours on this and I have no idea how to make it work.\r\n\r\nThis seems like one of those terrible browser inconsistencies. The same `x` and `y` values passed to [`dataTransfer.setDragImage`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#setDragImage.28.29) are interpreted by browsers differently when the element you interacted with is positioned with a negative offset to its parent. Notice how changing the transform to a positive one magically makes it work.\r\n\r\nThe reason you don't see this problem on some vanilla HTML5 drag and drop examples in Firefox is likely because they don't specify `x` and `y`, and default values turn out to “just work”. However we *need* to specify them for the dragged item appearing in the right spot in most cases.\r\n\r\nI doubt there's any feasible workaround here. **When any of the deeply nested children of the drag source node are out of its bounds to the left or the top edge, `setDragImage(node, x, y)` stops working correctly in some browsers.** Again, even if we tried to fix it for some browsers, we'd surely break this in other browsers, so I don't think we can reliably fix this.\r\n\r\nI'm closing, but feel free to look for workarounds! For now, I'd suggest avoiding negative transforms inside drag sources. Note that you can move `connectDragSource` *inside* the transformed wrapper:\r\n\r\n```css\r\n.ReactDnDElement {\r\n    background: red;\r\n    overflow: hidden;\r\n    width: 200px;\r\n    height: 100px;\r\n}\r\n\r\n.ReactDnDElement .transform {\r\n    transform: translate3d(-275px, 0, 0);\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.ReactDnDElement .wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    width: 600px;\r\n    height: 100%;\r\n}\r\n\r\n.ReactDnDElement .wrapper div {\r\n    width: 150px;\r\n    height: 50%;\r\n}\r\n\r\n.ReactDnDElement .wrapper div.green { background: green; }\r\n.ReactDnDElement .wrapper div.blue { background: blue; }\r\n.ReactDnDElement .wrapper div.yellow { background: yellow; }\r\n.ReactDnDElement .wrapper div.magenta { background: magenta; }\r\n```\r\n\r\n```js\r\nvar ReactDnDElement = React.createClass({\r\n    render: function() {\r\n      return (\r\n        <div className=\"ReactDnDElement\">\r\n          <div className=\"transform\">\r\n            {this.props.connectDragSource(\r\n              <div className=\"wrapper\">\r\n                <div className=\"green\"></div>\r\n                <div className=\"blue\"></div>\r\n                <div className=\"yellow\"></div>\r\n                <div className=\"magenta\"></div>\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      );\r\n    }\r\n});\r\n```\r\n\r\nHowever this way only the child part will be used as the drag image—not sure if you want this.\r\n\r\n<img width=\"261\" alt=\"screen shot 2015-09-17 at 17 48 31\" src=\"https://cloud.githubusercontent.com/assets/810438/9936381/5c33e0be-5d64-11e5-970e-c509c43cd580.png\">\r\n\r\nUnfortunately this is the best I can suggest. If this is a big issue for you, please consider using an alternative React DnD backend instead of HTML5: for example, a mouse backend like in #70, which wouldn't have this problem because it wouldn't rely on `setDragImage`. Another option is to keep using the HTML5 backend, but use [a custom drag layer](http://gaearon.github.io/react-dnd/docs-drag-layer.html) which doesn't rely on `setDragImage`."}}