Magento 2 - Magnify issue

Magento 2 magnify issue after full screen

Narrating issue :
This issue generally happens with images with no white space at the top.

Sometimes what happens when you enter into a full-screen mode of the gallery and pinch zoom the image, some part from the top does not visible. An issue is that, the top part of the image cut in that pinch zoom effect.

e.g. I have an image of a boy wearing a cap and T-shirt.
In this case, a T-shirt can be clearly shown in pinch zoom but some part (top) of the cap does not.

To resolve i started debugging. First, i thought, it was an issue of fotorama js so i checked the condition of all css 'top' properties applied from that file. console.log(top) each. But not get a code which was creating a problem.
Disappointment!!!!

Than i observed a behavior of the issue. I dig some more and found a condition which also alters functionality or says behavior. A file where i found a piece of code is located at lib/web/magnifier/magnify.js 

i console.log each and every top property values. Than i found a little piece of line which creates this little problem for non-white space images.

Solution :

Copy file magnify.js to your theme with same hierarchy. Now, Simply go to line number 597 with code


top = $imageContainer.offset().top < top ? 0 : top;

and update the code with below line of the code.

top = $imageContainer.offset().top < top ? 0+ $imageContainer.offset().top : top;

Code is updated but now still not working, don't worry you have not done anything wrong.

Just deploy content from by executing a command:

php bin/magento static:content:deploy

Cheers!!! 😄 You have done it. Keep reading!! 😊👍

Please share, comment and subscribe for future posts.