desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.41k stars 2.11k forks source link

Masonry not working on Firefox #1187

Open kaiThomas236 opened 1 year ago

kaiThomas236 commented 1 year ago

Hi, I'm using this with Node JS and it is not working on Firefox. I am getting an error that reads "Error in parsing value for ‘left’. Declaration dropped." I can see that all of the grid items are just recieving the attribute value "left: 0;" on Firefox. On Chrome that value updates as expected and works properly. Is there something I need to do to get this to work on Firefox?

image

RTeran commented 1 year ago

ey @kaiThomas236! Did you manage to fix it?

kaiThomas236 commented 1 year ago

hi @RTeran I did actually figure it out, basically firefox seems to do spacing differently sometimes.

I had initially had something like this:

.grid-sizer, .grid-box { width:32%; margin: 0.65%; }

and that worked fine on Chrome, but Firefox does not like it. So instead I had to break it out like this:

.grid-sizer { width: 33.3%; } .grid-box { width:32%; margin: 0.65%; }

where the width of the grid sizer is equal to or greater than the width of the margins plus the grid box. so in this case, 0.65 + 32 + 0.65 = 33.3.

hope that makes sense.

RTeran commented 1 year ago

oh, I got it! Thank you!!