Zoom breaks when browser viewport size changes e.g. portrait to landscape or vice versa

[joyfulelement]

While testing the responsiveness of this plug-in with gatsby, I noticed the zoom capability will disappear after the browser viewport resolution is changed, e.g. portrait to landscape or vice versa. A common use case when viewing with mobile device.

By examine the DOM, before the viewport size change:

<span class="gatsby-resp-image-wrapper" ...>
  <span class="gatsby-resp-image-background-image" ...></span>
  <img
    class="gatsby-resp-image-image medium-zoom-image"
    src="..."
    srcset="..."
    "
    ...
  />
</span>

after the browser viewport resolution is changed, the class medium-zoom-image that use to be applied against <img> tag will disappear and hence the loss of the zoom functionality:

<span class="gatsby-resp-image-wrapper" ...>
  <span class="gatsby-resp-image-background-image" ...></span>
  <img
    class="gatsby-resp-image-image"
    src="..."
    srcset="..."
    "
    ...
  />
</span>

Current Workaround

While not ideal, the zoom functionality can be restored with another manual refresh after the viewport resolution change.

[joyfulelement]

After some more troubleshooting, I later found the issue above can be reproduced if the component is re-mounted. Looks like when the component mounts again, the class medium-zoom-image does not get apply.

[flashtheman]

Is there some workaround for this issue?