Slideshow not loading in Chrome

This one's a bit of a mystery: The slideshow on the homepage is working fine in Safari. However, when I view that page in Chrome, the first image of the slideshow loads and then most of the others do not. This applies to both live view and editor view. The only way I can get them to appear is by unchecking "automatically crop", but...I need them to be automatically cropped. I tried uploading new images, and they have the same issue.

Note that this is a new problem. It wasn't happening when I launched the site; it only started a few days ago (and I didn't make any edits to the site between then and now).

Hoping someone out there has insight into this very annoying issue! Screen recording attached.

ETA: Second screen recording. It gets weirder...for the slide with no image, a small scroll bar appears at the bottom left of the section. What??

Screen Recording 2024-06-21 at 1.27.50 PM.mov

I didn't experience any issues with the slideshow in Chrome. Try clearing your Chrome browser's cache and see if this resolves the issue but bear in mind that users with slower connections will experience issues if the images cannot be downloaded before the slideshow advances. One of those images is over 800KB 🙂

Hi @paul2009! Glad to hear it’s not universal. Unfortunately, I’ve been able to replicate the issue on several devices on different networks (even after cleaning the cache.) Is there a chance you're not running the current version of Chrome? I have a feeling that the latest update broke something. 

I'm on a fast connection and I'm running Chrome v126.0.6478.115 on macOS and I am able to reproduce the issue.

Safari had no issue.

What appears to be happening is the pics that don't load have no src attribute on them.

I disabled all the Custom CSS locally and some of the missing images loaded. I can't say this is a purely CSS issue as not all the images appeared when removed.

No solutions just observations unfortunately.

@creedon it’s so odd! I also noticed in the Chrome inspector that the width of the ones that won’t load is something like 28px (which probably explains the random scroll bar that gets added). I also tried adding completely new, smaller images to the slideshow and they won’t load either. 

12 hours ago, LetterAndInk said:

Is there a chance you're not running the current version of Chrome?

You're right - sorry. Chrome 126 seems to the cause. It was working fine on 125.

I have same issue with a slideshow and do believe it is a Chrome issue.  Only the first image is loaded in chrome and any images that follow are not displayed at all.  Inspecting the SOURCES  the images.squarespace-cdn.com only contains or loads the first image in the slideshow. The HTML contains at least ten images.  The slideshow works perfectly on Safari and Firefox.   

I'm having the same issue! It's so frustrating! I am a little relieved, after all the troubleshooting I tried, that it's not my computer! 😅

Hello all I am also having the same issue and it appears to be specific to the latest version of Chrome. 

It would be great if everyone having this same issue could report it to Squarespace. Customer service told me that when they disabled all of my custom code, it worked...but it doesn't. Fingers crossed if enough people flag it, we can get it fixed!

Likewise I have tried disabling all my custom code and it still doesn't work. 

Hello! My client and I are having this same issue. Confirming we are both on the newest chrome, Version 126.0.6478.127 (Official Build) (arm64). 

I've been spending a bit more time looking at this today.

I have no workaround. The only thing that occurred to me as a potential workaround would be to use some JavaScript to add the missing src attributes with some JavaScript. I have no code and this would be a real hack trying to repair something gone wrong with Chrome and/or Squarespace.

I've also not been able to find a solid pattern, if there is one, as to when things go wrong. The only general one I found was two landscape oriented images, of the same dimensions, followed by portrait oriented images made the portrait ones not load.

I then tried a series of six images all the same orientation and size and it worked without a hitch.

Hi there, I also experienced the same issue with Chrome not loading the slide show images.

I went back into the slide shows and re-cropped the images to be the same proportion (they were all different proportions before). And that fixed the non-loading problems. 

I finally had a chance to get in touch with Squarespace support, and this is apparently a known issue with the latest build of Chrome. Hopefully it'll be sorted soon! In the meantime, I switched to the other kind of slideshow, which sacrifices captions but at least loads correctly. 

Hello there!

I had the same problem of  slideshow images not showing in Google Chrome (no Issues with other browsers). I tried a lot of things (including contacting Squarespace support) but it was eventually this thread that lead me to the solution. After reading @Gleena 's latest post I tried turning of the automatic cropping of the images and my problem was solved. Changing the aspect ratio of every images also worked but that was obviously very time consuming.

Thanks for the inspiration and good luck to everyone!

Hey! Did anyone get a resolve on this? I'm wondering if the issues I'm experiencing is related to this...

I'm having the same problem on my end.

What I am finding is that if the images are not cropped to the same height and width prior to uploading, it won't show up the narrow images vs the wider images. 

When we have the images cropped to the same height and width, they are all showing up fine without having to toggle off this setting. I hope they get this fixed asap!

It's totally madness, but I turned off "Automatically Crop Images" and it seemed to sort itself out for me. A really annoying bug... I hope Squarespace sort it soon.

I am also suffering from this problem. If Chrome doesn't fix on their end, I hope Squarespace would fix on our end. I am on Opera Browser. Firefox and my phone loads fine for me.

Try to use this code.

This code helped me fix the problem in Chrome whether the gallery slideshow has “Autocrop images” enabled or not:

/* Gallery Block - Slideshow */
  .sqs-gallery-design-stacked-slide img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    top: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
  }

@mikhael6363 Your code totally helped this issue to a certain extent. It ensured the second slide now shows up even with auto advance, but the third slide still does not. Do I need to alter the code slightly for that? I'm at www.wearehalo.org

I fixed this problem by editing each image so its the same size, using the editing (pencil) feature for each slide. The slideshow now works perfectly. 

14 hours ago, Ayn G said:

@mikhael6363 Your code totally helped this issue to a certain extent. It ensured the second slide now shows up even with auto advance, but the third slide still does not. Do I need to alter the code slightly for that? I'm at www.wearehalo.org

Hi Ayn,
 

Thanks for the feedback!
 

I just took a look at your site and tested the code in Google Dev Tools. From my side, the gallery is displaying correctly across the slides. I’ve attached a screenshot for reference.
 

Could you please check that your Chrome browser is up to date? Sometimes updating it can resolve these types of display issues.
 

Best,
Michael

Thank you, I still had issues on my current laptop. Where I live, the remote island of Orcas, a lot of people might be running older OS so I do need it to work on older chrome. Another user had a suggestion that helped. I'll past my response in here: tuanphan saved the day. Their advice of switching to a section gallery (i.e., choose images, slideshow) rather than creating a gallery through the "add a block" function fixed the issue. Thank you so much.