Product image zoom issue on product details page when drop-down menu have overlap area with it

You need to replace the code of lib/web/magnifier/magnifier.js in your theme as below.

$(document).on('mousemove', onMousemove);
_init($box, gOptions);

Replace it With.

$box.on('mousemove', onMousemove);
$box.on('mouseleave', mouseleave);
function mouseleave(e) {
   onThumbLeave();
   isOverThumb = false;
   $largeWrapper.addClass(MagnifyCls.magnifyHidden);
}
_init($box, gOptions);

We need to add function on "mouseleave" event of image block otherwise zoom will display after mouse leave from image block.
Please add the above code and let me know if you need anything else.


For magento version 2.2.6 replace below code in your theme. File path lib/web/magnifier/magnifier.js Replace in app/design/frontend/vendor/module/web

$box.on('mousemove', onMousemove);
_init($box, customUserOptions);

Replace it With.

   $box.on('mousemove', onMousemove);
   $box.on('mouseleave', mouseleave);
   function mouseleave(e) {
           onThumbLeave();
           isOverThumb = false;
           $magnifierPreview.addClass(MagnifyCls.magnifyHidden);
        }
   _init($box, customUserOptions);

I upgrade to v2.2.6 and it doesn't work anymore after that
I edit the code like this and it works :

 $box.on('mousemove', onMousemove);
    $box.on('mouseleave', mouseleave);
    function mouseleave(e) {
        onThumbLeave();
        isOverThumb = false;
        $(largeWrapper).addClass(MagnifyCls.magnifyHidden);
    }
    // _init($box, gOptions);
    _init($box, customUserOptions);