Breaks when parent container has transform3d

[janober]

When the parent container has a transform3d on it the entries have an offset and some other strange things happening when they get moved.

Here a codepen to show the issue: http://codepen.io/anon/pen/ogdXLK

[toksfifo]

@janober having the same issue. Any solutions?

[janober]

Sorry, sadly not. Did also have no time yet to look into it any further...

[toksfifo]

No worries. I'm going to try transforming the individual sv-element while it is being dragged, to offset the weirdness. Will let you know what happens

[janober]

Great, good luck! Hope it works out for both of our sake ;-)

[toksfifo]

I was able to "solve" this using a hack. Basically by translating the dragged element that is offset in CSS (can also be done in JS). Something like so:

yourElement.sv-helper {
    transform: translateY(-100px);
}

forked and edited your codepen as an example: http://codepen.io/anon/pen/rVwWLP

[janober]

Ah great if that hack works in your use case! However do not think it would work for me. Because I would not know how much to move it back. In my case the offset is always different and would also not just consist of one parent that is offset like that, it would be multiple ones.

[timbell]

I came across the same problem. It's described here: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ You can see that the original codepen works ok in IE11, but not in Chrome or Firefox.

I worked around it with this change: if(!moveExecuted){ ~~$element.parent().prepend(clone);~~ body.prepend(clone); ... }