[MOB-11504] Fix Persistent Scrollbar in In-App Message Iframes

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
 

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);

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: '<div style="height: 500px">hello</div>'
+            }
+          }
+        ]
+      });
+      const { request } = getInAppMessages(
+        { count: 10, packageName: 'my-lil-website' },
+        { display: DisplayOptions.Immediate }
+      );
+      await request();
+
+      const iframe = document.getElementById(
+        'iterable-iframe'
+      ) as HTMLIFrameElement;
+      const iframeBody = iframe?.contentWindow?.document.body;
+      if (iframeBody) {
+        Object.defineProperty(iframeBody, 'scrollHeight', {
+          value: 500,
+          writable: true
+        });
+        Object.defineProperty(iframeBody, 'offsetHeight', {
+          value: 400,
+          writable: true
+        });
+        iframeBody.style.overflow = 'scroll';
+      }
+
+      global.dispatchEvent(new Event('resize'));
+      jest.advanceTimersByTime(100);
+
+      expect(iframe.style.height).toBe('500px');
+      expect(iframeBody?.style.overflow).toBe('scroll');
+
+      if (iframeBody) {
+        Object.defineProperty(iframeBody, 'scrollHeight', {
+          value: 500,
+          writable: true
+        });
+        Object.defineProperty(iframeBody, 'offsetHeight', {
+          value: 900,
+          writable: true
+        });
+        iframeBody.style.overflow = 'hidden';
+      }
+
+      global.dispatchEvent(new Event('resize'));
+      jest.advanceTimersByTime(100);
+
+      expect(iframe.style.height).toBe('500px');
+      expect(iframeBody?.style.overflow).toBe('hidden');
+    });
   });
 });