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?

Your pop-up form appears cropped at the top on iPhones or Safari likely due to Apple-specific rendering quirks, especially around 100vh units and fixed positioning.

1. iOS Viewport Height (100vh) Bug

• Safari on iOS doesn’t calculate 100vh accurately because it includes the browser UI (address bar), which can collapse or expand.
• This affects fixed or absolutely positioned elements using 100vh, causing them to appear too tall, with top overflow being hidden.

2. Fixed Positioning and Scroll Behavior

• Popup forms that are position: fixed may render incorrectly on iOS when appearing inside scrollable containers.
• iOS has issues calculating proper coordinates when overflow: hidden or transform properties are applied to parent elements.

3. Meta Viewport Tag Missing or Incorrect

• Ensure your project includes the standard meta viewport tag:
  <meta name="viewport" content="width=device-width, initial-scale=1">
  While Webflow includes this by default, overriding custom code could affect it.

4. Keyboard Pushes Layout

• On iPhones, when the keyboard appears (e.g., input in a form), Safari resizes the viewport differently, which can push or crop fixed elements.
• iOS doesn't update layout immediately, especially for third-party embeds or modal forms.

5. Animations or Overflow Settings

• If you're animating the pop-up from outside the viewport (e.g., translateY -100%), and the body or parent has overflow: hidden, Safari may not repaint the element fully.
• Also, elements with overflow: auto or scroll above your modal can interfere with stacking and visibility.

6. Webflow Interactions Targeting Non-Relative Parents

• If your interaction or animation is moving the pop-up on scroll, it may be using unexpected coordinates on Safari due to parent elements lacking position: relative.

Summary

This issue stems from how Safari on iOS calculates viewport height and renders fixed elements. To fix it:

• Avoid 100vh and use JavaScript-derived height instead if necessary.
• Use absolute positioning inside relative wrappers when possible.
• Double-check overflow, transform, and animation states active on the modal and its parents.
• Test with the keyboard active to ensure it isn’t forcing layout changes.

Use custom CSS or JavaScript to dynamically set height on open if needed. Safari rendering inconsistencies require specific handling for reliable layout behavior.