JS-497: Fast screen resize in fullscreen mode breaks image size

Author: anastasiiabuniak

app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml

@@ -87,7 +87,7 @@
                     <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
                         "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
                     <?php endif; ?>
-                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navdir"); ?>",
+                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                     <?php if ($block->getVar("gallery/transition/navarrows")): ?>
                         "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navarrows"); ?>,
                     <?php endif; ?>

lib/web/magnifier/magnify.js

@@ -639,6 +639,7 @@ define([
                     e.preventDefault();
                     pinchDimention = getDimention(e.originalEvent);
                     isDragActive = false;
+
                     if ($image.hasClass(imageDraggableClass)) {
                         $image.removeClass(imageDraggableClass);
                     }
@@ -670,6 +671,7 @@ define([
                 if (e && e.originalEvent.touches && e.originalEvent.touches.length >= 2) {
                     e.preventDefault();
                     var currentDimention = getDimention(e.originalEvent);
+
                     if ($image.hasClass(imageDraggableClass)) {
                         $image.removeClass(imageDraggableClass);
                     }
@@ -726,7 +728,7 @@ define([
                         imagePosX = $(fullscreenImageSelector, $gallery).offset().left;
                         imagePosY = $(fullscreenImageSelector, $gallery).offset().top;
                     };
-                
+
                 if (($focus.attr('data-gallery-role') || !$focus.length) && allowZoomOut) {
                     if (isFullScreen) {
                         imagePosX = $(fullscreenImageSelector, $(gallerySelector)).offset().left;
@@ -766,7 +768,7 @@ define([
                         }
                     }
                 }
-    
+
                 if (e.keyCode === 27 && isFullScreen && allowZoomOut) {
                     $(gallerySelector).data('fotorama').cancelFullScreen();
                 }
@@ -781,7 +783,7 @@ define([
 
                 if (gallery.fullScreen) {
 
-                    if ($image.offset() && ($image.width() > $imageContainer.width())) {
+                    if ($image.offset() && $image.width() > $imageContainer.width()) {
                         endX = $image.offset().left;
                     }
 
@@ -791,9 +793,15 @@ define([
             });
 
             $(window).resize(function () {
+                var imageSize = getImageSize($(fullscreenImageSelector)[0].src),
+                    isImageSmall =
+                        $(fullscreenImageSelector).parent().width() >= imageSize.rw &&
+                        $(fullscreenImageSelector).parent().height() >= imageSize.rh;
+
                 toggleZoomButtons($image, isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
                 calculateMinSize($image);
-                if ($image.hasClass(imageZoommable) && !allowZoomOut) {
+
+                if ($image.hasClass(imageZoommable) && !allowZoomOut || isImageSmall) {
                     resetVars($image);
                 }
             });
@@ -826,7 +834,7 @@ define([
                 isClick = initPos[0] === pos[0] && initPos[1] === pos[1],
                 isImg = $(e.target).parent().data('active');
 
-            if (isArrow || (isImg && !isClick)) {
+            if (isArrow || isImg && !isClick) {
                 hideMagnifier();
             }
         }
@@ -866,8 +874,10 @@ define([
 
         $(element).on('fotorama:load fotorama:showend fotorama:fullscreenexit fotorama:ready', function (e, fotorama) {
             var $activeStageFrame = $(gallerySelector).data('fotorama').activeFrame.$stageFrame;
+
             if (!$activeStageFrame.find(magnifierZoomSelector).length) {
                 hideMagnifier();
+
                 if (config.magnifierOpts) {
                     config.magnifierOpts.large = $(gallerySelector).data('fotorama').activeFrame.img;
                     config.magnifierOpts.full = fotorama.data[fotorama.activeIndex].original;
@@ -951,7 +961,8 @@ define([
                 })
                 .on('fotorama:load', function (e, fotorama) {
                     if ($(gallerySelector).data('fotorama').fullScreen) {
-                        toggleZoomButtons($(fullscreenImageSelector), isTouchEnabled, checkForVideo(fotorama.activeFrame.$stageFrame));
+                        toggleZoomButtons($(fullscreenImageSelector), isTouchEnabled,
+                            checkForVideo(fotorama.activeFrame.$stageFrame));
                     }
                     magnifierFullscreen(fotorama);
                 })