Fix iframe modal positioning bug (app embedded in WordPress)

Immediate availability required .

I have a custom booking app (React + Stripe) embedded in WordPress via an iframe.

There is a bug where on first click of “Book Now”, the modal opens but scrolls too far down the page. On second click it works correctly. I am late launching and need urgent help to fix it.

Important details:

App works perfectly when opened directly (not embedded)

Bug only happens inside WordPress iframe

Likely related to:

iframe resizing

scrollIntoView

focus/Stripe mount

timing/race condition

We’ve already added resize clamping and custom scroll logic

What I need:

Debug why first open scrolls too far

Identify what overrides the scroll

Implement a clean, reliable fix

Ensure modal is centred first time, every time

Tech stack:

React frontend

Stripe Checkout

WordPress iframe embed

Custom postMessage resize handler

I can provide:

Full embed code

Screenshots

Console logs

Access to test environment

This is urgent and for someone experienced with React + iframes + modals who can fix it quickly