search

JaeYeopHan / gatsby-remark-images-medium-zoom

🤳medium-zoom plugin for gatsby! Raise UX of user who visit your gatsby site with this plugin
https://www.npmjs.com/package/gatsby-remark-images-medium-zoom
MIT License
50 stars 3 forks source link

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

Open joyfulelement opened 4 years ago

joyfulelement commented 4 years ago

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 commented 4 years ago

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 commented 2 years ago

Is there some workaround for this issue?