Breaks when element has right or bottom set

[desandro]

Add a 👍 reaction to this issue if you ran into this issue and would like to see it fixed. Do not add +1 comments — They will be deleted.

[robwierzbowski]

Could you use CSS transforms instead of positioning?

[mr-mig]

I vote for translate support as well.
It is more performant on those browsers, which has the CSS3 transformations support.
And will solve this issue (in the scope, limited by "good" browsers)

[desandro]

FYI Transforms are used for positioning while dragging. In my experience with Masonry and Isotope, using transforms for static (non-moving) position added a bunch of problems -- font rendering, Flash content broken, breaking other plugins and UI like dropdowns.

[mr-mig]

@desandro really, I should have looked in the sources before raising the voice.

Need to check my use case thoroughly, cause I have the top-left based positioning in Chrome.

Thx for pointing this out.

[mr-mig]

@desandro I still have a question: is there a reason to mix top and left with translate positioning?
I have an issue with those styles mixed - after the drag the setLeftTop method overrides left and top based on the translation coords and remove the translate

[desandro]

@mr-mig Sounds like a separate implementation issue you're running into, not quite related to the original issue about right or bottom being set. But to your question - yes, I use both top/left and translate values. translate when moving, and then reseting it with top/left. If you're trying to read these values, I suggest looking for the dragPoint property in the source and using that. Or try hooking on the dragMove event.

[mr-mig]

@desandro yeah, I have found it and patched in my fork. Still, I am more interested in the design decision: why those props are not separated?
I have found that Firefox deals really crappy with translate css3 animation, btw. Is it one of the arguments for topLeft positioning?

[franciscolourenco]

Would be useful to have an option which would toggle between top/left and transform positioning.