First element in new row bumped over in FF and IE11

[panablue]

Thank you for the great plugin!

This is working well for me with jQuery 2.1.4 except for one issue in FF and IE11:

The first item in all but the first row are being bumped to the right (and pushing other items with it), as you might expect from normally-floated elements where the next 'row' of floated elements doesn't clear the prior row.

I notice that making the content in the first item of each row the shortest for that row, seems to resolve the issue for each row.

I'm successfully able to work around it by adding a small negative bottom margin (margin-bottom:-.1em) to the first element in each row, but of course it requires extra CSS for every column-added breakpoint in responsive uses which would be nice to avoid.

[codekipple]

hmm i'll look into this and get back to you :)

[codekipple]

Any chance you could make up a jsfiddle or a codepen showing this problem if you have the time?

[panablue]

After more investigation I was finally able to isolate the issue, and it may just be browser-specific pixel/size calculations (in this case with em units) and not worth trying to reconcile in the plugin. (Maybe by sizing each row height by a small range?)

Here's an example on CodePen. (The first group does occasionally 'land' correctly in Firefox, but then all the others are off.)

In this example the base font size is 20px so the combination of font-size:1.1em and padding:.8em 0 gives a height of 57.2 pixels for the <h3>. As you can see in the bottom 3 examples, changing or omitting either of those rules clears it up.

[codekipple]

Thanks @panablue I will look into this more and let you know my thoughts. Haven't had a chance as yet but will this week.

I noticed the homepage for the plugin http://codekipple.com/conformity has this problem in firefox.