Jump to content

Products Grid - Image Hover - Second Image Loading Issues

Recommended Posts

Posted

Hi all,

https://www.jamesgadbury.com/shop

pw: Gadders

In my shop on the products grid, the on hover behaviour has changed.  The second product image used to display immediately on hover, without issue.

Now, on mobile, it doesn't display at all.  I get a blank product image loading up.  If I go into the product and then navigate back, on hover works and loads the second image.  Something seems to have changed with the second image loading / caching?  I haven't changed anything with my shop or my media library / images since I noticed the change.

On desktop, on hover works but it is slower than it was and requires the mouse cursor to move to prompt the load.  Starting to wonder if Squarespace have changed the functionality...

Has anyone else experienced this change? 

Cheers,

James

Posted

This is the same for me. The hover over product images in mobile no longer calls up the second image.

Desktop works fine. But for me it’s a faster transition. The transition can be controlled using CSS but the image fading to white is a problem 

Sample templates on Squarespace’s own site are showing the same error

Posted

I’m on the live chat with Squarespace now and they are trying to gaslight me by saying SS does not support text or image hover on mobile. Such rubbish. This has worked this way for the 4 years I have had my site up…. 
 

So frustrating 

Posted

Squarespace have acknowledged that they are experiencing issues with product list images turning white when touched on mobile. However, they say it may or may not be fixed in future releases. 

They still continue to gaslight me sdd as using that they do not (and never have) support alternate images being called up in touch screen devices, even though it’s been this way for years. 

Does anyone have a work around due this? @tuanphan do you happen to know anything we can try to stop our sites trying to call up the second product image in product lists on mobile? 

 

Posted (edited)

On store pages when I'm on mobile if i touch and hold on a product, instead of showing the 2nd photo like it's supposed to, the image just disappears. On computer browser it works fine but for some reason on phones it doesn't. Anyone know how to fix this?

 

edit: my post was made into a comment here somehow but i see we're all having the same problem... I may be switching to Shopify over this

Edited by nobody
Posted

Please report this to Squarespace. I have and I was told that “Squarespace does not support alternate images on hover on touch screen devices” but I was also thanked for pointed out an issue that their engineers are working hard to fix??????

So please report this as an issue. The more that do so the better. 

 

Posted
6 hours ago, creedon said:

I don't work for Squarespace so I have no influence over or knowledge of what SS is up to.

This lol.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Posted
45 minutes ago, nobody said:

sorry i just tagged whoever was most active in the forums, not sure who actually works here

In general I've observed that Squarespace employees have SQSP in their name like @Sarah_SQSP.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

Squarespace have still not fixed this issue.

On hover (or tap on mobile) the first image is supposed to fade to white while the second image loads on top and fades in. On mobile the first image is fading to white without calling up the second image.

A workaround is to keep the opacity of the first image and stop it from fading to white. This will stop the product images disappearing on mobile, while still keeping the original effect we were used to on desktop.

.products.collection-content-wrapper .grid-item:hover .has-hover-img .grid-image-cover {
    opacity: 1 ;
}

It works on my site until Squarespace gets themselves together and fixes this major issue

https://theneuter.com/shop

Posted (edited)

@nobody I guess your post was merged with this one and became a comment, as I had already reported it.

I've also since been on to Squarespace support about this. Ended up having to send a YouTube video capturing what I'm seeing as the support weren't understanding my issue.  I've followed up since.  Twice.  I've not had a response for 5 days.  I'll keep trying.  I've provided a load of feedback regarding how to replicate the issue.  My instinct says they know it's a new issue and are quietly working on it - one can hope...

I've proven to support that it's not solely my website by creating a basic, new site, no custom code and just a products list; two products and two images.  The behaviour can be replicated on two of my Android devices running Chrome or Edge.  Interestingly, Android Firefox works with alt image.  An iPhone doesn't attempt to load an alt image in my testing.

I've chased up support again.  The way I put it to them is this: fair enough if mobile devices don't support alt images, but it was working and now a blank image is loading and it doesn't look good.  If this is now the default behaviour across all SS sites accessed by Android mobile devices (running Chrome or Edge, possibly other browsers), that's not acceptable.  Adding custom code to our sites to stop a bug from happening is not a suitable final solution for all their customers.

I'll keep on to them.  I'm sorry yet relieved to hear that others are seeing this issue too.

I'm convinced SS changed something recently with image caching on products to introduce this bug.  If I go in to a particular product, hit back on my browser then hover over that product, it loads the alt image...

Edited by James-Gadbury
added more detail 2
Posted
8 hours ago, SergioC said:

Squarespace have still not fixed this issue.

On hover (or tap on mobile) the first image is supposed to fade to white while the second image loads on top and fades in. On mobile the first image is fading to white without calling up the second image.

A workaround is to keep the opacity of the first image and stop it from fading to white. This will stop the product images disappearing on mobile, while still keeping the original effect we were used to on desktop.

.products.collection-content-wrapper .grid-item:hover .has-hover-img .grid-image-cover {
    opacity: 1 ;
}

It works on my site until Squarespace gets themselves together and fixes this major issue

https://theneuter.com/shop

this is a great workaround until they get their act together, thanks!! 

 

I just can't believe how nonchalant Squarespace is about breaking vital functionality. Talked to support and they said "We’ve noted your report with our Engineering and Design teams for review and they’ll use this feedback when creating fixes and improvements for future releases."

Posted (edited)
1 hour ago, nobody said:

I just can't believe how nonchalant Squarespace is about breaking vital functionality. Talked to support and they said "We’ve noted your report with our Engineering and Design teams for review and they’ll use this feedback when creating fixes and improvements for future releases."

I just received this exact scripted response word for word.  Additionally, I got a 'many variables to test against and we can't guarantee changes for this issue in the immediate future.  Our team consider all feedback, and input is appreciated.  Thanks again for reporting, and if you see any other unusual behaviour, please let us know'.

After the effort I put in to testing, reporting, detailing and reproducing a bug that has been recently introduced, this canned and open-ended response has made me angry - it's an issue that must be affecting many ecommerce customers.  A list of products in a shop loading up blank images looks broken and unprofessional.  I've replied because it's an unacceptable response.  I've also provided them a link to this forum post.

Yes, we have a workaround with custom code.  That's something.  But how will I know if / when the issue is resolved?  What about their customers that don't know how to use custom code?  Grrr.  As a new customer, I'm not impressed with their support so far.

Edited by James-Gadbury
Posted

Squarespace is run very very badly. The only place for REAL help and support is on this forum. All my problems have been solved by all the amazing users in this forum. Squarespace users/customers have way more knowledge than any squarespace support person because they know all the little idiosyncratic issues of their site and the squarespace system. Squarespace ALWAYS treat you like an idiot and gaslight you.

My biggest problem with Squarespace is that a customer is NEVER notified of upcoming changes or bug fixes in releases, be they significant or otherwise. You only know when you happen to look at your site and see that everything has changed. I remember once they made a massive overhaul of the way a store's inventory and categories worked. Without warning, my shop had categories with huge type that I had no way of making smaller. And that's because the all knowing creative chief David Lee likes big type. So everyone has to like big type.

It's like a cult.

Posted (edited)

Totally agree, @SergioC

Well, I'm left frustrated, annoyed & disappointed with support. Completely vague and noncommittal.

I've tried to express the impact of the matter while politely pressing for answers & persisting - getting nowhere.

The issue is logged including the info I reported.  However, they:

 

Can't say if or when it will be fixed.

Can't tell me the priority of the issue / how seriously they're taking it.

Can't tell me when or how often they issue software updates.

Can't provide a changelog.

Might inform me when it gets fixed, if it does, although...

"I'll know if it's been fixed because I'll notice it on my site", was what I was told.

Won't escalate my case as there's 'no further action required right now'.

 

It's similar to the behaviour of an unhealthy person with a personality disorder.  Like it or lump it. It makes me question the management and culture at the company.

I agree, the forums and community support here is brilliant. However, I'm left unimpressed and concerned with their attitude.  I'm considering an exit strategy.

Edited by James-Gadbury
  • 4 weeks later...
Posted

Let me jump on this as well, 

I have too reported this issue just now, I've been seeing it for a while but thought it might be a slow loading error and didnt do further checks up until recently. I have the same problem on my end and they came back to me with the same scripted response which is complete bull ... I wonder what are these support people there for ? To help me drag and drop boxes in edit mode ? Or to direct me into a section where I've forgotten to tick a box or something to activate a feature? Great help, thanks... Like out of the 10-15 times I've reached out to them for whatever reason they have been just completely useless and unhelpful guiding me to some generic pages which I already know of.

I've invested too much time into my website using this platform hence why I didnt ditch it at the beginning and just move to shopify but am now considering of hiring someone to replicate my entire websites functionality in shopify to save myself time and just be able to migrate as soon as...

Too many bugs and too many important and basic features missing... I wish I tried out shopify first before going for this badly ran company ... 

Similar issue happened with summary blocks - I've got a hover effect on them and one day they just started acting up so much that I thought I did something but as you can imagine it was to do with them screwing up something while doing something else.... and it got fixed eventually. In fact that got fixed pretty quickly so I am hoping they will do the same here but since this post is almost a month old I assume they will take their time .... 

  • 1 month later...
Posted

Hello - I'm hopeful someone may have a solution or fix. I did start a support ticket with SS as they look into my issue.

1. My product images disappear in all 3 of my stores when in mobile. Once I begin to scroll the image fades to white and won't reappear. This only happens in mobile, In desktop the secondary product image fades in (hover effect) and looks fine. I wonder if the issue is the hover effect when in mobile?

2. I uploaded several screen shots from my mobile device.

3. This error/glitch only happens to the live site when tested on iPhone 13, 15 and in Chrome, Safari & Firefox. It does not appear from inside the SS CMS when in mobile view.

4. Would a work around be to turn off the hover effect on my product images? Although I like that effects visual aesthetic.

Many thanks

Andy

www.BalancedTravel.com > Shoppe > IMG_7202.thumb.PNG.37283a1be33c1c9854022a41dbe104c4.PNGIMG_7204.thumb.PNG.2d31b998eb63917174162086ef838799.PNGIMG_7202.thumb.PNG.37283a1be33c1c9854022a41dbe104c4.PNG

IMG_7203.PNG

Posted

Hi all,

I'm replying here as this might be useful to someone else, as it was for me (used as a temporary fix on my website). I've just found a block of CSS code that completely stops the hover animation on the website's Shop page. This resolves the issue of the second/third images not showing on mobile.

It's a "temporary fix," though, as it will completely eliminate the animation on that page and only display a fixed first image in the store page. It helps until Squarespace comes out with a final solution.

I found the solution in a post by Sam Crawford. There's also a video on his YouTube channel.

Hope it helps!

Cheers,
Luiz

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.