Full size image breaks when using CSS3 columns in Chrome
Closed this issue · 2 comments
Hi!
I'm trying to use Fluidbox with column-count in Chrome and it seems to break for the second column's images, while the first column works OK. You can see an example of what's going on here but I really can't figure out what's going on; it appears to be browser specific.
What makes this problem even stranger is it actually works perfectly in Firefox, just not in Chrome. I've updated jQuery to 1.11.2 with no success.
Would hugely appreciate any help here - I think I'm missing something fairly small.
That is really strange — if you inspect the element when Fluidbox is open, you can see that .fluidbox-ghost is indeed positioned correctly, but there seems to be some layout artefacts when columns are implemented (and strangely not to contents in the first, leftmost column).
I don't think there is anything I can help you beyond attributing this to differential interpretation of CSS column rules by different rendering engines. You might want to consider using a JS-based method, just as Masonry.js, to do layouts, of which you will call the Fluidbox function when the layout is ready (like a success callback or the likes, most plugins, if well-designed, will have a hook in place).
p/s: Really pretty photos by the way, which reminds me I need to go out with my gears more often :)
That's cool - I've started looking into Masonry indeed as it is a better way to lay out anyway. Thanks for taking a look! I know what you mean by needing to take more photos, it's easy to just forget :)