Commit 2a462d0776b8cae58d378305c42310b3e5b4061e breaks all translate3d transitions, if using percentPosition:true. I tested this using Isotope 2.2.1 in the newest versions of Chrome, Firefox and Internet Explorer.
Reason for the transitions breaking: Since the update, the x and y values for translate3d are not in pixels anymore, but in %. The values that are being used here are those returned from Item.prototype.getXValue. This works perfectly fine for Item.prototype.layoutPosition, but not for Item.prototype._transitionTo, because percent values in translate3d are not relative to the item's parent, but relative to the item itself.
I constructed a very basic example to demonstrate this: https://jsfiddle.net/51vL64df/
Try resizing the output! If the width goes below 800px, responsiveness kicks in and Isotope tries transitioning all items to their new positions.
Commit 2a462d0776b8cae58d378305c42310b3e5b4061e breaks all
translate3d
transitions, if usingpercentPosition:true
. I tested this using Isotope 2.2.1 in the newest versions of Chrome, Firefox and Internet Explorer.Reason for the transitions breaking: Since the update, the x and y values for
translate3d
are not in pixels anymore, but in%
. The values that are being used here are those returned fromItem.prototype.getXValue
. This works perfectly fine forItem.prototype.layoutPosition
, but not forItem.prototype._transitionTo
, because percent values intranslate3d
are not relative to the item's parent, but relative to the item itself.See this StackOverflow thread: http://stackoverflow.com/questions/25046493/transform3d-using-percentage-to-move-within-parent-object
I constructed a very basic example to demonstrate this: https://jsfiddle.net/51vL64df/ Try resizing the output! If the width goes below 800px, responsiveness kicks in and Isotope tries transitioning all items to their new positions.