Position:relative and/or margins mess up the position

Question

Position:relative and/or margins mess up the position

fregante opened this issue 9 years ago · comments

Here I was able to reproduce the issue without position:relative:
http://codepen.io/anon/pen/zGQxBJ

Then I saw your jsfiddle and I was only able to reproduce the bug with position:relative
http://jsfiddle.net/ckmpv5gd/

On my current site I'm using position:absolute on one of the elements and have the same issue.

The issue should be on these lines: https://github.com/Rich-Harris/ramjet/blob/master/src/utils/node.js#L59-L60

Federico Brigante · Answer 1 · Tue Aug 18 2015 02:41:49 GMT+0800 (China Standard Time)

This seems to work for me, although I haven't tested it thoroughly (edit: in fact it fixes the second demo but not the first one)

clone.style.top = top  - offsetParentBcr.top - parseInt( style.marginTop, 10 ) + 'px';
clone.style.left = left  - offsetParentBcr.left - parseInt( style.marginLeft, 10 ) + 'px';

Federico Brigante · Answer 2 · Sat Oct 17 2015 10:54:09 GMT+0800 (China Standard Time)

It looks like the first demo now works, but the second one doesn't.

Maurizio Lupo · Answer 3 · Sat Oct 17 2015 20:19:24 GMT+0800 (China Standard Time)

The second one works using the appendToBody option.
http://jsfiddle.net/ckmpv5gd/3/
I think it should be the default. I'd like to build a test page with all possible variations (positions, margins, scrolling translations etc.) for checking that it is working in any case.