What could be causing a pop-up form to be cropped at the top on iPhones and Safari, despite working properly on Chrome Desktop and Mobile?

A pop-up form being cropped at the top on iPhones and Safari is typically caused by mobile Safari’s unique handling of viewport height and overflow behavior. This issue often doesn't appear in Chrome or on desktop due to differences in rendering engines.

1. Safari’s Viewport Height Behavior

• Safari (especially iOS Safari) treats 100vh differently by including the browser's UI (address bar/toolbars), which can lead to layout issues.
• This can cause elements positioned using 100vh or top: 0 inside fixed containers to be pushed off-screen or cropped.

2. Overflow and Positioning Issues

• Safari may ignore certain overflow: auto or overflow: scroll declarations on containers, especially on elements with position: fixed.
• Elements that are fixed positioned with top: 0 may not respect padding or safe-area insets, resulting in them being partially off-screen.

3. Safe Area Insets (Not Respected)

• iPhones with notches or dynamic islands need env(safe-area-inset-top) or CSS properties like padding-top: constant(safe-area-inset-top) (for older compatibility) to avoid UI overlaps.
• If your pop-up form is close to the top and doesn’t account for this, Safari may crop it.

4. Fixed Position Within Scrollable Modals

• Using position: fixed inside an overflow container commonly breaks in iOS Safari.
• Instead, use position: absolute scoped inside a relatively positioned parent to avoid breakage.

5. Webflow-Specific Fixes

• In Webflow, if you've used 100vh for the modal container, try replacing it with a manual height using calc(100vh - 20px) or similar.
• Add top padding to the form wrapper like padding-top: 20px or use Webflow's custom code feature to include a padding-top: env(safe-area-inset-top) via custom styles.
• Ensure the modal’s wrapper uses position: relative, and the form itself uses position: absolute or another method that avoids fixed stacking issues in iOS.

6. Test in Webflow Preview vs. Published Site

• Sometimes, the issue doesn't show in Webflow Designer or Preview.
• Always test via the published link in an actual Safari or iOS environment for accurate behavior.

Summary

The form is likely being cropped due to Safari’s special handling of viewport height, safe areas, and position: fixed. To fix this, avoid strict 100vh layouts, account for safe insets, and rework positioning using absolute inside a relative wrapper instead of fixed.