WIP: Sometimes individual images in the gallery do not load in Chrome

Bugs
1

I have 2 computer here in the office, and when i open this page in chrome there are somtimes missing some images: Referenzen – Alan Zangana Bau

Pls reload the page a few times, then you should see what i mean. It is only bricks activated, all other plug-ins are disabled. Maybe it’s important that it’s a litespeed web server. But caching is also deactivated.

Here you can find an screenshot: https://zangana.fastpress.dev/wp-content/uploads/2024/11/bricks-gallery.jpg

Thx for your help

2

Hi Christian,
Thanks so much for your report!

I can see the issue on your site, but unfortunately, I cannot reproduce it.
Can you see the same issue on this URL, too?

https://try.bricksbuilder.io/ted545f0/image-gallery/

In any case, please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.

Best regards,
timmse

3

I send a mail. I cannot see the failure on your gallery.
Thx for your help

4

Hi Christian,
Thanks so much for the access data!

It seems that Chrome has problems with the lazy loading of images in your case. After deactivating the Bricks native lazy loading, it works fine as far as I can see.

I have also consulted with the developers. Since the problem cannot be reproduced permanently and occurs somewhat randomly (sometimes not at all/in random places), we have no concrete starting point. Googling for similar issues shows multiple results, so maybe it’s a Chrome thing that will be fixed in a future Chrome version – fingers crossed.

However, I created an internal task in case we receive more reports on this issue.

5

I found out a bit more infos. perhaps its useful. If i remove the image gap in bricks, the gallery works fine, also with lazy load enabled: Referenzen – Alan Zangana Bau

6

I think the problem is caused by the images themselves. My customer sent them to me via WhatsApp. Maybe they are faulty. As a test, I downloaded 20 images from Unsplash and created a gallery and it works with Gap without any problems.

7

We had a similar problem ages ago where changing the gap by one or two pixels more or less made it work. All in all super strange, especially when you say that it works with other images.

It may help to re-save the images in e.g. Photoshop or a similar app. Like I said… all in all pretty strange :smiley:

8

I will try the Photoshop workaround :slight_smile: Thx for your help!

9

The Photoshop workaround dont work. But when i change from raster to metro the failure is gone.

10

Hello,
after a long search I came across this post. I have exactly the same problem. Regardless of the browser. Whether Chrome, MS Edge or Android Samsung browser. With or without lazy load.
Likewise the behavior without spaces between the images. It works without.
The behavior is shown with Grid and Masonry. No problems with Metro.
I don’t think it has anything to do with the Chrome browser. I have the problem with all the browsers I have used.

best regards Thomas

11

Hi, this problem happens also to me.

I use grid layout for gallery and I am using Chrome. No animations are set.

With the gap set to 0 it works.

With gap higher than 0, it doesn’t load all the images upon refresh nor scrolling down the page helps.

I have 8 images in gallery and gallery has 7 columns. Sometimes it loads only first 5 images and no more. Sometimes it loads first 5 out of 7 in the first row but in the second row the last and only image was loaded correctly.

I tried changing css but it didn’t help. (I think the problem will be here)

Other weird behaviour I found out:

  • Even though some images are not displayed, they are loaded in the network tab and initiator is bricks.min.js (so it seems lazy load js loads them).
  • If I change the tabs in chrome (only one is enough) and go back, the images are displayed most of the time.
  • If I actiavte “Device toolbar (ctrl + shift + m)” (responsive preview in chrome) it works every time on refresh. I tried changing the viewports to the highest available space it has no effect. Also regardless of the setting on top “mobile”, “mobile (no touch)”, “desktop”, etc. it works every time.
  • Immediately after closing device toolbar the images hides. But in network tab I can see all images are reloaded. But when the device toolbar hides JS reloads all the images but source is different (srcset attribute on img tag has different sources). One image that is missing is only 1200px wide. If i dont use device toolbar, it always loads the largest image (no thumbnail generated from wordpress. Put differently, filename doesnt have any part like this IMGL8226 -768x512 .jpg). When I open device toolbar and I stretch the window to full (2155px wide window and content inside container stays the same width), it loads a thumbnail which is when it works all the time.

I am really sorry if I write too badly but I am running out of time. I wanted to contribute to this issue as 2 years ago I was having the same problem but on normal image tag (tough using animation on veiwport enter and it didnt work only on safari mobile). I was forced to disable bricks lazy load and I used one from ewww image optimizer plugin. For me it seems like the same problem as back then, so this maybe affects other sites without developers not knowing. If you have any questions I will try to be as helpful as I can.