I’ve been struggling with a frustrating UI bug on mobile for 4 days now and could really use some expert insights.
The Setup:
-
WordPress with WooCommerce.
-
Theme: Flatsome.
-
Custom AJAX Add to Cart script.
-
A custom full-screen loading overlay (
position: fixed) triggered during the AJAX request.
The Bug (iOS specific – Chrome): When I scroll down the page, the iOS bottom navigation bar hides, expanding the actual viewport. While in this expanded state, if I click the “Add to Cart” button, my loading overlay appears but leaves a visible gap at the bottom of the screen. It fails to cover the newly expanded viewport area. (If I scroll up and the bottom bar is visible, the overlay works perfectly).
Here is a image demonstrating the issue: Click Here
What I have tried so far (and none worked):
-
Using
height: 100vh,100dvh, andheight: 100%. -
Pinning with
top: 0; bottom: 0; left: 0; right: 0;(and the moderninset: 0). -
Injecting the overlay directly into
instead ofto escape the theme’s wrappers. -
Using the
element and.showModal()(Top Layer). -
A massive
box-shadow: 0 0 0 9999px rgba(...)hack on a 0x0 div. -
Locking scroll by adding
overflow: hidden; touch-action: none;toand. -
Calculating exact dimensions dynamically using the
window.visualViewportAPI and applying them via JS.
My Suspicion: I suspect Flatsome is adding a transform (like translate3d) or overflow: hidden to the #wrapper or body the moment I click the button to prepare for its off-canvas minicart. This creates a new stacking context, causing my position: fixed overlay to behave like position: absolute relative to a container that hasn’t fully recalculated its height yet.
Question: How can I force a position: fixed overlay to truly cover the entire iOS viewport ignoring any DOM manipulations (like transform or overflow) done by the Flatsome theme during the click event? Are there any workarounds for this specific iOS viewport + DOM mutation lag?
Any help is greatly appreciated!
