Help Required: Bug, Image Blocks Suddenly Not Appearing on Website—Stuck at 0% Opacity From Default Squarespace Loading Fade-in Animation

Recently noticed that after editing a page, images near the top of the site are not visible. Hovering over the image and right clicking shows that the image is recognized (ie. "Open image in new tab", etc). I've tried removing code injections and custom CSS. It made no difference. 

Any help would be appreciated. 

Thank you!

Hi,

Can you share link to page & take a screenshot?

Hi,

I manage a constellation of sites on Squarespace:

https://www.stackmethod.com

https://www.pulsemethod.com

https://www.visionmethod.com

Each of these pages has several image blocks on them, but perhaps most notably, each has two image blocks in the hero section of each page, a large product logo image and a smaller, monochrome company logo above it (see image below).  Today, however, my team realized that none of these image blocks were appearing on our live sites.  I examined them in DevTools and saw that the images had in fact loaded and were present in the code, but that the reason they were not visible was that they each had their CSS opacity set to 0.  Each of these images a fade-in animation that is applied by default by Squarespace—it's not something I added to the image (and in fact, each of the images says "No animation" still under the "Animation" options of the "Design" tab when I inspect the image in the Squarespace WYSIWYG editor, and editing this fixes nothing), but appears to be a default animation such that when the page loads, all images fade in automatically.  Well, for some reason, this animation stopped functioning and now all of our images are stuck at 0 opacity and thus invisible on the page.

I thought perhaps there may have been a javascript error issue, where some code was breaking javascript on the page and preventing an animation from running, but I observe no such errors in the console, and the rest of the javascript farther down the page is executing fine.

So, the conclusion I'm left with is that this must be a major Squarespace bug.

Is anyone else experiencing this problem?  I am unable to contact Squarespace support because they are not available now until Monday morning.  If there were a way to turn off this automatic animation behavior, I might be able to fix it, but I can't figure out what setting in Squarespace actually controls this behavior, perhaps it is baked into the template that my employer used to start the site before I revamped it?  Looking at it in devtools again, I notice that the attribute "data-load" is set to "false" on these images.  Setting "data-load" to "true" makes the CSS match a rule with opacity: 1, making the images visible.  So perhaps there is a loading problem after all.  Nothing has been changed from our end, though.

Image Attachment #1: Should look like this.

Currently looks like this (with my annotations, note the "opacity: 0" and "data-load" attribute in the CSS rule):

You are using v7.0 and it appears you are in Developer Mode. Which template(s) are the sites based on?

9 hours ago, creedon said:

You are using v7.0 and it appears you are in Developer Mode. Which template(s) are the sites based on?

Correct.  It was based on Pacific, chosen before I took over development duties, and I turned on dev mode for all our sites and customized the templates.

Since I can't wait until Squarespace support comes back on Monday morning, I have temporarily decided to cobble together a hacked solution as follows:

$('#header-section img').each(function() {
    const img = $(this);
    
    $.get(img.attr('src'), function(data) {
        if (data) {
            img.removeAttr('data-load');
            img.addClass('loaded');
        }
    });
});

I looked at the Pacific template's scripts, and when an image is asynchronously loaded, the "data-load" attribute is removed, and a "loaded" class is added to the image.  As such, I simply implemented the same behavior within the callback of a GET request that requests the image and then tests to make sure the data was successfully received.  This has successfully resulted in our images becoming visible once again.

However, I stress that this is only a temporary patch—I would like to get to the bottom of this bug.

Quote

It was based on Pacific, chosen before I took over development duties, and I turned on dev mode for all our sites and customized the templates.

Thank you. This gives us a chance to compare a non Developer Mode version of Pacific to see if we can see anything.

Good job on the workaround!

On 8/2/2023 at 9:43 AM, Isaac_Insteon said:

The issue was related to our site being in Dev Mode. Here's the response from Squarespace support:

 Last week, we rolled out a new way that images are loaded onto our platform. This affects all 7.x websites where images that fade in on load, start at 0% opacity and when the image loading completes, it triggers something to change the opacity to 100% so that they appear. But since you have developer mode enabled, your site didn’t get the patch for the Pacific template.
 
You will need to manually update your site code in your site’s template files. Since your site is a developer mode site, it is outside our scope of support to assist with custom code solutions. I was suggest looking at the index.less file in your template files.

Would something similar effect button loading on a 7.1 site? Randomly certain buttons won't load when loading my website. Then they'll just spontaneously appear. See the "Start Dreaming" button below.

https://triangle-chartreuse-j4nn.squarespace.com/

On 8/2/2023 at 9:43 AM, Isaac_Insteon said:

The issue was related to our site being in Dev Mode. Here's the response from Squarespace support:

 Last week, we rolled out a new way that images are loaded onto our platform. This affects all 7.x websites where images that fade in on load, start at 0% opacity and when the image loading completes, it triggers something to change the opacity to 100% so that they appear. But since you have developer mode enabled, your site didn’t get the patch for the Pacific template.
 
You will need to manually update your site code in your site’s template files. Since your site is a developer mode site, it is outside our scope of support to assist with custom code solutions. I was suggest looking at the index.less file in your template files.

Thanks for the tip, I have identified where in the template CSS the issue lies.

I will fix this and remove my hack at some point in the near future.

Right now I am too busy trying to find a workaround for Squarespace's broken banner videos.

Hope this will get to someone, I seem to have a similar problem on Avenue on gallery pages on page load. My site is not live yet but I have removed all custom code injections, code blocks and custom css just to test and issue is not resolved so I do not think its the code. Is there something I need to do to fix this, just started happening today. Thanks,

Images in galleries in my dashboard dont appear either. 

https://animalhausstudio.com/transistor