diff --git a/react-example/.env.example b/react-example/.env.example index a7fb6d98..8887e134 100644 --- a/react-example/.env.example +++ b/react-example/.env.example @@ -6,9 +6,6 @@ # API_KEY=1234 # JWT_SECRET=1234 -# Only set BASE_URL if developing locally, as it will take precedence over the production api urls. -# BASE_URL="https://api.iterable.com/api" - # You may authenticate with JWT; be sure to use an API key that is configured to require JWT. # USE_JWT=true diff --git a/src/inapp/inapp.ts b/src/inapp/inapp.ts index c338f19d..1c954925 100644 --- a/src/inapp/inapp.ts +++ b/src/inapp/inapp.ts @@ -175,10 +175,24 @@ export function getInAppMessages( const throttledResize = messagePosition !== 'Full' - ? throttle(750, () => { + ? throttle(100, () => { + const iframeBody = activeIframeDocument?.body; + if (!iframeBody) return; + + /** Hide overflow to prevent scrollbar affecting height determination */ + const originalOverflow = iframeBody.style.overflow; + const shouldHideOverflow = originalOverflow !== 'hidden'; + if (shouldHideOverflow) iframeBody.style.overflow = 'hidden'; + + /** Set the height of the iframe to the height of the iframe body */ activeIframe.style.height = `${ - activeIframeDocument?.body?.scrollHeight || 0 + iframeBody.scrollHeight || 0 }px`; + + /** Restore overflow after new height is set */ + if (shouldHideOverflow) { + iframeBody.style.overflow = originalOverflow; + } }) : () => null; global.addEventListener('resize', throttledResize); diff --git a/src/inapp/tests/inapp.test.ts b/src/inapp/tests/inapp.test.ts index f7b4b6b6..28433e36 100644 --- a/src/inapp/tests/inapp.test.ts +++ b/src/inapp/tests/inapp.test.ts @@ -1252,5 +1252,64 @@ describe('getInAppMessages', () => { // Note: sendBeacon property is used internally by the authorization system // but not preserved in the mock request history, so we don't test it here }); + + it('should resize iframe and restore/hide overflow when necessary', async () => { + mockRequest.onGet(GETMESSAGES_PATH).reply(200, { + inAppMessages: [ + { + ...messages[0], + content: { + ...messages[0].content, + html: '