How can I enable scrolling on my Webflow site when using an I frame as the cover image, specifically for Safari on iPad?

TL;DR

Ensure page elements (body, html, wrappers) use overflow: auto or visible and not hidden.
Define proper height and avoid position: fixed on iframe containers; use relative positioning.
Set pointer-events: none on the iframe to allow scroll gestures to pass through.
Add -webkit-overflow-scrolling: touch; overflow: auto; to enable touch scrolling in Safari.
Replace height: 100vh with min-height: 100vh to fix viewport issues on iPads.
Test on an actual iPad using Safari and debugging tools for accurate results.

If scrolling is disabled on your Webflow site when using an iframe as a cover image, especially on Safari for iPad, it’s likely due to CSS overflow or iframe settings restricting scroll behavior.

1. Check Page-Level Overflow Settings

Go to the Body (All Pages) element in Webflow Designer.
In the Style panel, make sure no parent element (e.g., body, html, or a wrapper div) has overflow: hidden unless intentional.
Set body and html elements to overflow: auto or visible if scrolling is blocked.

2. Review the Iframe’s Container

Select the div that wraps the iframe or video.
Confirm its height is properly defined. An element with no height may block interaction or scrolling.
Set position to relative, and avoid position: fixed on containers that cover the full screen unless necessary.

3. Modify Iframe Display Behavior

Safari on iPads has stricter policies on interaction with iframes.

If you are using an iframe for a video cover (e.g., YouTube or Vimeo), consider absolute positioning with pointer-events: none.
Select the iframe and set pointer-events: none in the Style panel. This prevents the iframe from intercepting scroll gestures.

4. Test with Touch Events on Safari

Safari on iOS responds specifically to touch interaction:

Ensure the container or main wrapper allows touch scrolling.
If needed, apply -webkit-overflow-scrolling: touch; by using a custom attribute:
Go to the element (e.g., body wrapper), open the Settings tab (gear icon), and add a custom attribute:
- Name: style
- Value: -webkit-overflow-scrolling: touch; overflow: auto;

5. Check for Fixed or Fullscreen Elements

Any element set to fixed, 100vh, or overflow hidden might block scroll.
On mobile Safari, use min-height: 100vh instead of height: 100vh to avoid viewport height issues due to browser UI.

6. Use Webflow’s Mobile Preview and Publish

Don’t rely only on Webflow’s built-in preview. Publish the site and test directly in Safari on an iPad.
Use Safari’s Web Inspector (via Mac) to debug if necessary.

Summary

To enable scrolling on Safari iPad when using an iframe as a cover image, ensure your page’s overflow isn’t blocked, set pointer-events to none on iframes, and use CSS that supports touch scrolling. These changes let the page scroll freely even with an iframe present.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer