PDP image switching not working on IE11

[chippleh1392]

Expected behavior

On the product page, clicking an image thumbnail should swap the main image to the selected thumbnail image.

Actual behavior

On IE11, clicking the thumbnail results in nothing happening

Steps to reproduce behavior

On IE11, go to any product page that has more than 1 image, click a thumbnail image that is different from the currently selected image.

Comments

I investigated this and it appears that IE11's way of setting the main image using inline css (background-image property) is not compatible with the EasyZoom swap() function which is called in the swapMainImage() function in image-gallery.js. EasyZoom is specifically looking to update the image's src and srcset attributes. I implemented a fix just using an IE11 detection check and updating the needed image attributes with jQuery.

swapMainImage() {
    // ie11 fix
    let isIE11 = !!window.MSInputMethodContext && !!document.documentMode; // detect if ie11
    
    if (isIE11 == true) {
        this.$mainImage.find('img').css('background-image', `url('${this.currentImage.mainImageUrl}')`);
        this.$mainImage.find('a').attr('href', this.currentImage.mainImageUrl);
    } else { // if not ie11, perform easyzoom swap
        this.easyzoom.data('easyZoom').swap(
            this.currentImage.mainImageUrl,
            this.currentImage.zoomImageUrl,
            this.currentImage.mainImageSrcset,
        );
    }

    this.$mainImage.attr({
        'data-zoom-image': this.currentImage.zoomImageUrl,
    });
}