Inconsistent images rendering in Chrome

[janeks]

When Testing images demo http://codepen.io/desandro/full/pyYxvz/ in Chrome I've noticed images rendered in a random fashion. Almost every time I refresh the screen images end up in different columns. In addition column length changes also. Sometimes the first column contains a single image and sometimes six pictures.

This behavior can’t be replicated in Internet Explorer or Firefox. Each refresh shows images in the same spots.

[desandro]

Thanks for trying out Colcade!

Thanks for reporting this issue. Yes, the order of images might be different. This is because Colcade works without waiting for images to load. So an image might be loaded or it might not, which can cause the layout to be different each time you load the page.

However, there should not just be one image in a column. The columns might a bit uneven after everything loads, but not this uneven. I've been unable to reproduce the one-in-column behavior, but I'll have to keep an eye on this.

[janeks]

I came across images load and Chrome issue a while ago when I build a plugin that required EqualHeight script. There are screenshots of Colcate columns 4-1-4-4 and 1-4-4-4. There is also an issue of the first image, full size blinking for a split second before the screen changes to the grid view.

[vorbe]

If colcade works without waiting for the image to load you may be able mitigate the problem by defining an aspect ratio container around each image through css, which won't be ideal in the example above with so much image size variation.. but if you're creating something like a news card item it could help if you have a few consistent image size presets.

So for a portrait and landscape, calculate the aspect ratio of the image by divide the dimensions, eg if the image is 16:19 then 450/800*100 = 56.25.

I would then set up a class for that image something like:

.img-container-16-9{
        max-width: 100%;
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
        height: 0;
    }

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

and output the image something this:

<div class="article-teaser-image">
        <div class="img-container-16-9">
            <img src="cat.jpg" class="img-responsive">
        </div>
    </div>

This could also help when messing around with other factors involving javascript like lazy loading, especially if it's lengthy layout.

[cupcakedream]

I'm also having this issue