Posts widget - When "Image ratio" is set, post images are flashing when loading

[MichaelDarko]

When i use the Posts widget and i set the Image ratio property, it crops the original image.

The problem is, when the page is loading - for a split second - it loads the original image and after that it crops it. The result is this ugly flicker/flash after every reload.

It seems to be happening to everyone. For example when i watch YT tutorials featuring the Posts widget, i can see the delayed cropping also causing flashing when loading/refreshing.

It seems like the cropping is done by JS and the JS is loading after the CSS, or something like that. Is this a bug or you just think this is OK and it will stay like this?

The Image ratio setting is great and crucial, but the flashing caused by it makes the website look really unprofessional.

Do you know about this? Are you planning to fix this? If not, is there some workaround to still be able to change the image ratio and eliminate the flashing caused by delayed loading of JS or something?

Thank you.

[bainternet]

@JoeDarko

Thanks for reporting, Please follow guidelines for opening a new issue/feature request, so we can help you better. This report is missing key information:

• Prerequisites.
• Steps to replicate.
• Isolating the problem.
• System info.

The cropping is done Server side so not in js or CSS, its only updated with the cropped image URL via JS.

Can you show a screen capture of the issue you are describing?

[MichaelDarko]

I found a video where the problem can be clearly seen:

https://www.youtube.com/watch?v=nTFJfmcFejc&t=153s

At 2:37 in the video, when he refreshes the page, you can see how bad the loading looks. The height of the feature image field is loaded much larger and after some delay the height is cropped and the image appears. This is happening after every refresh and looks really bad.

[bainternet]

@JoeDarko

I see what you mean and sorry it is done via JS I missed the part about "Posts widget".

We'll take a look.

[black-eye]

+1 Confirming this issue.

[nuphunk]

+1 it’s a real pain

[Danuve3]

+1 it's happen to me too

[sgarlarud]

Hi guys, the same to me, please check it out!!

Thanks

---

edit

Temporary (and roughly) solved by the combination of these two rules:

CSS RULE

.elementor-post__thumbnail {
	height:0;
	visibility:hidden;
}

JQUERY SCRIPT

jQuery(document).ready(function() {
	jQuery('.elementor-post__thumbnail').css('visibility','visible').hide().fadeIn('fast');
});

[yaniv691]

This is still happening in the latest version. Any plans for fixing this? Like the @MichaelDarko mentioned, the website looks unprofessional. @bainternet please help.

[onemast]

Still happening in 2023. Any updates?

[jure123]

Found a fix for it: https://shahriarislam.com/1109/fixed-in-2024-elementor-post-images-flashing-if-image-ratio-is-set/

@ByteShahriar, your link is not working. Could you please fix it? Thank you.