gatsby-remark-images-medium-zoom
gatsby-remark-images-medium-zoom copied to clipboard
Zoom breaks when browser viewport size changes e.g. portrait to landscape or vice versa
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.