Second image change issue for products mobile (hover effect)

Hi all,

Few days ago hover effect in my shop stopped working on mobile. I know that it was working perfectly, but it just stopped and now by touching it showing a blank/white screen instead of second picture of my product. Nothing changed on the desktop version, the issue is only on mobile.

Does anyone started experiencing this? I wrote to Squarespace, as no additional code was added from my side, which could maybe initiate the problem.

adding video.

Thank you !

its work fine here in mobile i think you fix this issue.?

Hi @Mdhanjal

No, the issue remains, situation is still the same as you could see in the video. When I touch the product image the image just goes white.

Hi!
I have exactly the same issue on my website 

On 8/9/2024 at 10:06 PM, ArthurD said:

Hi!
I have exactly the same issue on my website 

Use this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
img.grid-item-image.grid-image-cover {
    opacity: 1 !important;
}
img.grid-item-image.grid-item-additional-image {
    opacity: 0 !important;
}
img.grid-item-image.grid-image-hover {
    opacity: 0 !important;
}
}

Hi @tuanphan
Thank you very much it works!! 🙌

Hi @tuanphan ,

With your provided CSS you only stopping the hover effect? Am I correct?

Because, for fluent hover I was using below codes:

Header:

<script>
document.addEventListener("touchstart", function(){}, true);
</script>

CSS:

element:hover, element:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none /*only to disable context menu on long press*/
}

And as I mentioned it just magically stopped working. 

Mindaugas