Featured Images are randomly failing to render when Post Template is Grid

[jeflopodev]

Description

Those featured images are randomly failing to render on page refresh, they're are loaded, because when I zoom-in or zoom-out pressing CTRL++ or CTRL+- they are then rendered visible...

Please check the video below. In the video I used Chrome but I also tried on Vivaldi:

Seems to happen only when the template post is set to Grid, at least for me.

Since here #49280 you both are talking about the need for a query pattern of a grid of featured images.
I thought you could be interested: @annezazu @richtabor

Can you guys repro this ?

I tried enabling WP_DEBUG and I don't see errors in the page or in the console (devtools).

I went through 10 pages of existing issues 😅
And I've found other about the featured images failing to load in the admin & preferences pages #55460
But this is on the front-end... I don't think it's the same problem, therefore, I create a new issue.

Step-by-step reproduction instructions

1. Create Posts with Featured Images (added from sidebar)
2. Create a Query Loop on a Page and set the post template to Grid
3. Save, Publish & Load the page
4. Check if after reloading some featured images are not visible.
5. Check if after Zooming in and out (CTRL++ or CTRL+-) the featured images get rendered.

Screenshots, screen recording, code snippet

> 10MB so I'm uploading it to YT
https://www.youtube.com/watch?v=DuPnYzxJsTQ

Environment info

WordPress 6.6.2
Gutenberg 19.3.0
Chrome 129.0.6668.60 (Oficial Build) (64 bits)
Vivaldi 6.9.3447.48 (Stable channel) (64 bits)
Windows 11 23H2

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[annezazu]

Thanks for tagging me in this! I couldn't replicate this. I used this playground instance, set the query loop to grid view, and saved. When viewed on the frontend, everything worked as expected.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[ntsekouras]

I can't reproduce either and in the video it seems that some images just take a bit more time to load and they are shown, no?

Is this still happening for you @jeflopodev or should we close this one?

[jeflopodev]

I can't reproduce either and in the video it seems that some images just take a bit more time to load and they are shown, no?

No. The problem was that some images loaded, or not, randomly when refreshing the page.
And those not loading were rendered only after zooming in or out in the browser (crtl + + & ctrl + -)
Pretty weird.
I have no clue what could have caused this issue. Maybe it was just a my machine issue 😅

Is this still happening for you @jeflopodev or should we close this one?

No.

They now just flicker till they load, I guess.
But they load.
Using 6.7 btw

1122.mp4

[jeflopodev]

Oh my....
I have refreshed the page today and I had the issue again.
The exact same behavior as in the original post but with the new example on WP 6.7.
On another tab, in the editor, I was about to save the page after deleting the query loop block thinking it was solved.
So after seeing the error again I have undoed the deletion. Saved. Refreshed the page.
And now it properly work. No issue...

I don't yet understand why it happened again, once.

I'm trying to make it fail again 🗡

I have tried WP_DEBUG true and false, no errors. No console output.
On Chrome & Vivaldi.
Clearing cache.
Tried to throttle the connection to 3G.
Cleared Application data.
I had no browser extensions enabled.

Everything seems to work by now...

I kept trying.... and after an F5.... Boom

The image doesn't load waiting for it... to load. (been waiting for some minutes)
Until I press CTRL++ or CTRL-- or try make a mouse selection through the image area.
I have checked, that the non-loading images exist in the DOM. so.... They're just not being rendered.

It felt like a browser Issue... so I tried on Vivaldi, and also happens.

I tried installing firefox... I can't make it fail there.
I tried both logged in, and logged out.
I can't reproduce this in the playground either.

I guess something weird is happening on my system (Windows 11 23H2) with chromium based browsers...
But it's curious that only happens to me with WordPress and not happening on other sites.