-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Inconsistent images rendering in Chrome #2
Comments
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. |
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:
and output the image something this:
This could also help when messing around with other factors involving javascript like lazy loading, especially if it's lengthy layout. |
I'm also having this issue |
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.
The text was updated successfully, but these errors were encountered: