Broken left-to-right order, pixel-rounding issues

[baptistebriel]

Hi,

I'm having a few issues with Packery; seems like originLeft is not working in some cases. I usually get empty spaces in the grid and sometimes the last item is aligned to the right.

Also, it seems like the items are positioned in a different order than the HTML elements in the document; I've done a quick gif to explain. Is there a way to keep those elements in the same order as they are in the dom?

I tried looking at what could differ from one element to another, and seems like they both have the same height/widths. I don't have any other divs rather than a sizer column that could break the positioning behaviour. Any help/ideas would be much appreciated!

I tried using Masonry instead of Packery, but got the same result. Thanks!

[baptistebriel]

I've just tried looking at pckry.packer.spaces and got this in the console;

I've got only one (visible) empty space, tho it seems like there's 5 of them. Also wondering why some of them have Infinity height? Thanks! 🙂

[desandro]

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[baptistebriel]

Sure, here's a CodePen demo: http://codepen.io/BaptisteBriel/full/vGdZpG/

This kind of layout could actually be done with floats only, but I need to be able to switch to different column widths (5, 4, 3, etc..) and that's where Packery would have come in handy.

Thanks for your time & help!

[adrianbourke]

I'm also experiencing the same problem. Looking forward to a solution. Thanks!

[desandro]

Thanks for the demo. Looks like this is an unfortunate consequence of using JS for web layout. There can be slight measurement rounding errors with cause these left-to-right order breaking.

One solution has been proposed for Masonry desandro/masonry#811, but it would be more complex to implement in Packery. I'm sorry to say I do not have a solution at this time.