When viewing a modal with large height on a Pico CSS page on iOS 17 (Safari), I get some buggy overflow behaviour.
The modal is larger than the vieport, because it's max-height is set to calc(100vh - var(--pico-spacing) * 2).
I replaced this with calc(100svh - var(--pico-spacing) * 2) (svhinstead of vh), which uses the smallest possible viewport size to limit the modal height.
Otherwise, the modal is sized according to the viewport sized when the browser UI is collapsed, which causes overflow when the browser UI is expanded.
Is this intended behaviour or will this be fixed?
Instead of svh, dvh could also be considered, which would dynamically resize the modal according to the current browser viewport height.
When viewing a modal with large height on a Pico CSS page on iOS 17 (Safari), I get some buggy overflow behaviour. The modal is larger than the vieport, because it's max-height is set to
calc(100vh - var(--pico-spacing) * 2). I replaced this withcalc(100svh - var(--pico-spacing) * 2)(svhinstead ofvh), which uses the smallest possible viewport size to limit the modal height. Otherwise, the modal is sized according to the viewport sized when the browser UI is collapsed, which causes overflow when the browser UI is expanded. Is this intended behaviour or will this be fixed? Instead ofsvh,dvhcould also be considered, which would dynamically resize the modal according to the current browser viewport height.