Persistent empty space below footer on iOS (iPhone) across multiple sites

[Daryl_Shaw]

Hello Themeco Team,
I am experiencing a recurring issue across several websites built with Pro/Cornerstone. On real iOS devices (iPhone/Chrome), there is a significant empty space (approx. 300px - 500px) appearing below the footer.

The details:

• The issue does not appear in the browser’s responsive preview or on Android; it is specific to physical iPhones.
• The space is in the background color of the site/body.
• I am using several sections with height: 100vh .
• A JS check reveals that document.body.scrollHeight is significantly larger than the combined height of all sections and the footer (difference e.g. around 305px).
• Using overscroll-behavior: none or overflow: hidden on .x-site did not resolve the “ghost scrolling” into this empty area.
• The issue persists even on simple pages.

It seems like a calculation error between the iOS dynamic viewport and the Pro-Framework container logic. Is there a recommended way to force the container to end strictly at the footer, or a specific CSS fix to prevent the body from expanding on iOS?

I would appreciate any insights or a global fix for this.

Best regards
Daryl

[ruenel]

Hey Daryl,

Please duplicate your homepage. In the Intro Section, tweak the height of the Column.

From this:

Into this:

Setting the height to 100vh limits the height compared to using the minimum height.

Kindly let us know how it goes.

[Daryl_Shaw]

No, unfortunately that doesn’t help.

I have this problem – besides on the linked page – also on other pages that have a different type of header/intro. On a real physical iPhone, there’s always empty space below the footer (it might be 1 screen height / about 100 vh, assuming I disregard the iPhone’s address bar and navigation. No error occurs in the preview or the Google Console using device simulation).