Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breaks when parent container has transform3d #31

Open
janober opened this issue Feb 21, 2015 · 7 comments · May be fixed by #81
Open

Breaks when parent container has transform3d #31

janober opened this issue Feb 21, 2015 · 7 comments · May be fixed by #81

Comments

@janober
Copy link

janober commented Feb 21, 2015

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
Copy link

toksfifo commented Jun 9, 2015

@janober having the same issue. Any solutions?

@janober
Copy link
Author

janober commented Jun 9, 2015

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

@toksfifo
Copy link

toksfifo commented Jun 9, 2015

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
Copy link
Author

janober commented Jun 9, 2015

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

@toksfifo
Copy link

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
Copy link
Author

janober commented Jun 10, 2015

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
Copy link

timbell commented Jul 9, 2015

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);
...
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants