Illustratr: lazy-loading image feature breaks layout on portfolio template

[cecilearkay]

Steps to replicate

1) Install Illustratr as a theme 2) Create portfolio projects 3) Set up a page with the Portfolio template 4) AT your site with the Business plan 5) Activate the lazy-loading images feature in Jetpack

Result

Images jump, get stuck together:

Expected

Proper spacing between each element, like so:

• User report: #9669665-hc
• Follow-up ticket: #3076672-zd

[cecilearkay]

Also reported in #22480724-hc EDIT: the theme is Qua, so it looks like it's widespread.

[mikeicode]

Reported (Illustratr): 27843924-hc

[sophiegyo]

I think this is related, although it doesn't look the same. Report: 4423014-zen

Issue: at the bottom of the portfolio projects in Illustratr, on the portfolio layout page, the images don't quite align. I realise Illustratr is primarily a masonry layout but since the other projects on the site all line up nicely in a grid, it seems odd that only the last ones would be misaligned. Judging from how the HTML has inline absolute positioning on each item, which looks like it readjusts via JS when the browser is resized, I'd hazard a guess this is still *lazy loading which has this effect.

Images: