[Sense 5.0.1 and Dawn 7.0.1] Incorrect variant image on Android devices when "Hide other variants’ media after selecting a variant" disabled

[sofiamatulis]

Describe the current behavior

Using Chrome Android devices ONLY when the Hide other variants’ media after selecting a variant is disabled on product pages, the incorrect variant image is displayed when selecting a new variant

https://screenshot.click/31-22-5e52k-g2jk2.mp4

Describe the expected behavior

Using Chrome Android devices when the Hide other variants’ media after selecting a variant is disabled on product pages, the correct variant image should be displayed when selecting a new variant

https://screenshot.click/31-38-9l0vg-6s43f.png

Version information (Dawn, browsers and operating systems)

Tested on Android, v12.0 on Chrome

Not replicable in Safari on Android v12.0, so seems to be isolated to Chrome on Android

Not replicable on macOS Chrome or Safari on iOS

Able to replicate on both Sense (merchant live theme) and Dawn (live theme on test store)

[DigitalStu]

Hey, just wanted to add some notes about other behaviour I'm seeing with this issue, in case it's helpful.

For reference, this is my Zendesk ticket (https://shopify.zendesk.com/agent/tickets/37099715), and I was able to replicate the core issue at play here on Craft 8.0.1 and Craft 9.0.0.

I noted that variant selection itself wasn't the issue, as the correct variant URL parameter was being loaded. It also appeared that the correct variant image was being selected, but just not displayed.

For example, if I had one main product image and 3 variant images, I would see a carousel saying 1/4. Then at some point the carousel gets stuck on 2/4. So the correct variant image is being shown as 1/4, but it can't be seen because the carousel won't move from displaying 2/4.

I did also notice that scrolling back to the top of the page and then making a variant selection appeared to kick the correct behaviour back in, but then the issue reappears whenever the variant image is right at the top of the mobile viewport.

[naxorn]

This was a weird one and still an issue in Dawn v10. I was only able to replicate this when on mobile size (< 750px) doing the following:

• hide thumbnails on mobile
• show other variant images
• Use Chrome on Windows 10 or Android (Edge doesn't have this bug lol!)

Potential Causes?

There seems to be a weird quirk when double smooth scrolling (page and slider) on mobile (or maybe just prepending the image). In media-gallery.js it scrolls to the slide using activeMedia.scrollIntoView({ behavior: 'smooth' }). But this behaviour is also specified in CSS too, which causes this quirk.

Workaround 1 - Remove smooth scroll argument

Use activeMedia.scrollIntoView() for mobile only... The page jumps immediately, but at least the slider is back on slide 1/4 now instead of being stuck on 2/4

Workaround 2 - Just abandon scrolling the page to the image entirely

Why chose this option?

The page shouldn't be moving when a variant changes. This becomes especially important on mobile with lots of options and you need to scroll just to see them. You don't want the user forcibly scrolled to the image after each selection, only to have to scroll back down again to pick the next choice. They can scroll when they're done their selections.

This solution still uses scrollIntoView, but only in one very limited scenario (see below) that seemed safe.

In media-gallery.js do the following

setActiveMedia(mediaId, prepend, viewingMode) {

  //... more code ...

  this.preventStickyHeader();

  window.setTimeout(() => {
    const isDesktopSize = !!(this.mql && this.mql.matches);
    // TODO: add this class name to main-product.liquid schema
    const isMainProduct = !!this.closest('.section-main-product');

    if (this.elements.thumbnails || (isMainProduct && !isDesktopSize)) {
      activeMedia.parentElement.scrollTo({ left: activeMedia.offsetLeft });
    }

    // Stacked/2-column desktop layout and sticky product
    // Shouldn't be disruptive to scroll for the user
    if (isMainProduct
      && isDesktopSize
      && !this.dataset.desktopLayout.includes('thumbnail')
      && this.closest('.product__column-sticky')) {
      activeMedia.scrollIntoView({ behavior: 'smooth' });
    }
  });
  this.playActiveMedia(activeMedia);

  //... more code ...

}

In schema tag in main-product.liquid update the class:

{% schema %}
{

  "class": "section section-main-product",

}

[NeevusPeevus]

Found another instance of this on Sense 13, although I can not connect it to the "Hide other variants' media after selecting a variant".

ZD Ticket: https://shopify.zendesk.com/agent/tickets/45516889