Pressing back button in browser after zooming an image breaks body scroll

[walmsles]

Issue Type

• [x] Bug report
• [ ] Feature request
• [ ] Question / support request
• [ ] Other

Description

After clicking on the image to enable zoom, when the back button is pressed, the browser goes back to the previous page, but scrolling on the body is not re-enabled. Unable to scroll HTML body until the browser is refreshed.

Place detailed information here: Using in simple uncontrolled mode to zoom images (which works great - I like it). Except the back button press causes the HTML body not to be scrollable.

[rpearce]

@walmsles Nice find! I'd love to collect a little more info:

• What browser and operating system did you notice this in?
• Are you using a single page app and seeing this, or are they full page navigation changes?
• When you go back, is the image still "zoomed", or is it just that the body isn't scrollable?

[walmsles]

Happy to answer (FE is very complicated, isn't it):

• Chrome Version 112.0.5615.137 (Official Build) (arm64) - Mac Book Air (M1)
• Single page app - Statically Generated App using NextJS v13.1.1
• When I go back - The image is gone, and I am back at the prior page without the ability to scroll. Can also navigate to clickable links on the page and still have no scroll ability.
• Can be reproduced here: https://serverlessdna.com/strands/observability/when-serverless-goes-wrong - scroll down to article images (not header image). Recommend under the heading "About the Project" as a good example.

Let me know how else I can help.

Effectively with NextJS13 - I have wrapped Next/Image with the following - via react-markdown and remark to add to the layers:

     <Zoom
            zoomImg={{
                src: src ||'',
                width: "100%",
                loading: "lazy",
            }}
       >
            <NextImage 
                src={src || ''}
                className={className}
                width={500}
                height={312}
                alt={alt || 'un-named blog article Image'}
            >
            </NextImage>
        </Zoom>

[rpearce]

Thanks! That should give me enough to go on to try to reproduce it and fix it.

[rpearce]

This was super easy to reproduce and fix thanks to your information! https://github.com/rpearce/react-medium-image-zoom/pull/422

I'll add you to the all contributors list for your bug report, and I'll report back here when the next path version is published in a moment.