fix(storefront): BCTHEME-37 Cornerstone - Image Zoom Does Not Work on…

… Internet Explorer (#1923)
bigcommerce · Dec 9, 2020 · 9083ea3 · 9083ea3
1 parent c58cbeb
commit 9083ea3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Cornerstone - Image Zoom Does Not Work on Internet Explorer. [#1923](https://github.com/bigcommerce/cornerstone/pull/1923)
 - Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)
 - Product images squashed in Category view in AMP. [#1921](https://github.com/bigcommerce/cornerstone/pull/1921)
 - Fixed misaligned tooltip for required product option. [#1915](https://github.com/bigcommerce/cornerstone/pull/1915)

diff --git a/assets/js/theme/product/image-gallery.js b/assets/js/theme/product/image-gallery.js
@@ -90,10 +90,14 @@ export default class ImageGallery {
     }
 
     checkImage() {
-        const containerHeight = $('.productView-image').height();
-        const containerWidth = $('.productView-image').width();
-        const height = this.easyzoom.data('easyZoom').$zoom.context.height;
-        const width = this.easyzoom.data('easyZoom').$zoom.context.width;
+        const $imageContainer = $('.productView-image');
+        const containerHeight = $imageContainer.height();
+        const containerWidth = $imageContainer.width();
+
+        const $image = this.easyzoom.data('easyZoom').$zoom;
+        const height = $image.height();
+        const width = $image.width();
+
         if (height < containerHeight || width < containerWidth) {
             this.easyzoom.data('easyZoom').hide();
         }

diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -422,6 +422,8 @@
 .productView-image .easyzoom-flyout {
     overflow: hidden;
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;