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 cropped pop-up form on iPhones and Safari is typically caused by viewport behavior, positioning issues with fixed or absolute elements, or iOS-specific quirks in Safari's rendering.

​

1. iOS Viewport Height Inconsistencies

​

• Safari on iOS doesn't treat 100vh the same way as other browsers; it includes the browser’s address and toolbars, which change height on scroll.
• If your pop-up uses 100vh or relies on full-viewport centering, this can cause it to overflow or get cropped.

​

Solution: Use JavaScript to set a custom height variable based on window.innerHeight and apply it via CSS (e.g., --vh: 1vh approach). Then style the popup using height: calc(var(--vh, 1vh) * 100);.

​

2. Fixed or Absolute Positioning Issues

​

• Elements with position: fixed or absolute may behave inconsistently across browsers, especially in modals or pop-ups.
• Parent container's overflow might be set to hidden, cutting off the form.

​

Solution: 

• Try changing popup container to use position: absolute within a relative parent, or adjust positioning using flex layout.
• Check the overflow settings on all ancestor elements, especially body, html, and wrapper divs.

​

3. Safari-Specific Rendering Bugs

​

• Safari sometimes miscalculates scroll position or rendering layers during transitions or when soft keyboards appear.

​

Solution:

• Avoid triggering the popup immediately on page load or scroll.
• Add -webkit-overflow-scrolling: touch to scrollable containers.

​

4. Z-Index Not High Enough

​

• The form may technically be displaying, but behind another layer or hidden due to incorrect stacking context.

​

Solution: 

• Ensure the pop-up element has a sufficiently high z-index (try z-index: 9999) and that no parent has z-index or overflow that interferes.

​

5. Webflow Embed or Interaction Conflicts

​

• If you're using Webflow Interactions or custom code, Safari can behave differently during transitions or position updates.

​

Solution:

• Test your popup with interactions removed to isolate the issue.
• Use Webflow.push(function() { … }) to ensure code runs after Webflow’s render.

​

Summary

​

The cropped form is likely caused by viewport height inconsistencies, positioning issues, or z-index conflicts specific to iOS/Safari. Adjust your styling to avoid relying on 100vh, test alternate positions, and ensure the popup is not hidden or clipped by container styles.