masonry icon indicating copy to clipboard operation
masonry copied to clipboard

Masonry not working on Firefox

Open kaiThomas236 opened this issue 2 years ago • 3 comments

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

kaiThomas236 avatar Apr 12 '23 21:04 kaiThomas236

ey @kaiThomas236! Did you manage to fix it?

RTeran avatar Jun 05 '23 07:06 RTeran

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.

kaiThomas236 avatar Jun 05 '23 18:06 kaiThomas236

oh, I got it! Thank you!!

RTeran avatar Jun 06 '23 05:06 RTeran