[2.2.4] Gallery Magnifier hover event does not always cancel magnifier when mouse leaves gallery

[gwharton]

Gallery Magnifier hover event does not always cancel magnifier when mouse leaves gallery

Preconditions

1. Stock Magento 2.2.4 install
2. Apply PR [2.2-develop] Update Gallery Template to handle boolean config Variables #15020 so we are not testing issue ontop of issue
3. Change luma theme to enable magnifier

        <var name="magnifier">
            <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width"></var> <!-- Width of magnifier block -->
            <var name="height"></var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

4. Set current theme to luma
5. Create test product with image

Steps to reproduce

1. View test product on frontend
2. Move mouse over image
3. Move mouse away from image over each of the four sides of the image in turn

Expected result

1. Magnifier should appear when mouse over image
2. Magnifier should disappear when mouse leaves images

Actual result

1. Magnifier does not always disappear

Video of it happening

[rubenelshof]

I have the same issue (with and without your PR applied).
It seems to have to do with the following PR #13084.
When reverting the change made in the PR it works fine.

The solution at the bottom of the page mentioned in the original issue #5129 (comment) also doesnt fix this issue.

[gwharton]

Yeah, confirm, works fine if you revert that change.

[attiquer]

Having same issue with Magento 2.2.4.

[valanitin]

@dmanners Can you please assign me this issue? Or add me in the contribution team so that I can self-assign issues to myself. As I have solution for this issue, I need to commit the code and generate pull request for the same.

[proman77]

Same issue with word "image" under the photo:

<div class="fotorama__caption__wrap" id="labelledby1527757266301">Image</div>

[valanitin]

For a quick solution you can follow https://magento.stackexchange.com/questions/227354/product-image-zoom-issue-on-product-details-page-when-drop-down-menu-have-overla/227398#227398 this.

[proman77]

@valanitin
Seems that will solve with Gallery Magnifier hover. Thanks. And what's about second part of issue: the word "image" under the photo?

[gwharton]

See #15020 for fix for label under image