On iOS Safari overlay doesn't cover all of the screen's height because of height: 100svh style

[eych]

Issue Type

• Bug report
• Feature request
• Question / support request
• Other

Description

On iOS Safari when you start scrolling a page, the bottom menu bar disappears, and the top location bar reduces its height. When that happens and I tap on an image to zoom it, the white overlay under the zoomed image doesn't cover all of the screen's height, and I can see the page's content at the bottom.

If I remove height: 100svh; style from https://github.com/rpearce/react-medium-image-zoom/blob/main/source/styles.css#L60C3-L60C17, the issue goes away (Safari just uses the still remaining height: 100vh;).

It seems like in the described case, 100svh is equal to the viewport's height with both the bottom menu bar and the full-height top location bar present. So, when the bars are hidden or reduce their height, 100svh doesn't represent the full height of the viewport anymore.

Is there a particular reason why height: 100svh is used in the styles?

[rpearce]

Hi, and thanks for the report! I need to be using dvh, and I'll get that updated ASAP.

CSS units like svh and dvh take into account mobile browsers' potential addition or removal of browser interface components like the URL bar and back button.

dvh is for "dynamic view height"-when those interface components can come and go.

svh is for the smallest view height, which isn't what we want :)

Thanks for the report!

[rpearce]

Thanks for your PR contribution! You've been added to the all contributors list in the README, as an author in package.json, and your update has been released under [email protected].

I've also created a separate issue to investigate looking at the pinch-to-zoom experience on mobile, as well.