Mobile error on product images in my shop

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 >

Hi,

Can you share link to a product where you have problem? We can check easier

Thank you. I pasted a couple links below. Same issue happens in all 3 of my shops.

https://www.balancedtravel.com/travel-prints

https://www.balancedtravel.com/framed-prints

https://www.balancedtravel.com/digital-prints

I can't find the cause, but you try using this to Website > Website Tools > Custom CSS

.products.collection-content-wrapper .grid-item {
    opacity: 1 !important;
    transform: translatey(0) !important;
}

Thanks. I added that Custom CSS but no luck. I still get the strange image disappearing on my smartphone but looks just fine on desktop. See attached. Is it possible to turn off the roll-over effect on mobile only? So it only stays on a single product image without trying to change?

Awesome! That worked so far. I've tried on multiple phones and browsers. Thanks so much! 

Cheers

Andy