diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts b/core/src/components/textarea/test/label-placement/textarea.e2e.ts
index 7aff19c45c..a50672c3bf 100644
--- a/core/src/components/textarea/test/label-placement/textarea.e2e.ts
+++ b/core/src/components/textarea/test/label-placement/textarea.e2e.ts
@@ -266,4 +266,40 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-async-label`));
     });
   });
+  test.describe(title('textarea: flex in grid rendering'), () => {
+    test('should correctly render new lines in stacked textarea', async ({ page }) => {
+      /**
+       * While this bug only impacts Safari, we run this
+       * text on all browsers to make sure the Safari fix
+       * does not negatively impact other browsers.
+       */
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/27345',
+      });
+
+      /**
+       * Add padding to make it easier to see
+       * if the text is incorrectly flowing outside
+       * the container on Safari.
+       */
+      await page.setContent(
+        `
+        <div style="padding: 20px;" class="container">
+          <ion-textarea fill="solid" label="Comments" label-placement="stacked"></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const nativeTextarea = page.locator('ion-textarea textarea');
+
+      await nativeTextarea.type(`Comment
+        With
+        Multiple
+        Lines`);
+
+      await expect(page.locator('.container')).toHaveScreenshot(screenshot(`textarea-multi-line-sizing`));
+    });
+  });
 });
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3e6b5b4eb6
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ef7986886a
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..567f26e068
Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-multi-line-sizing-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index 6bf3911c3d..e656910bd8 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -323,6 +323,15 @@
   min-height: inherit;
   max-height: inherit;
 
+  /**
+   * This avoids a WebKit bug where
+   * the height of the inner textarea
+   * is incorrect and flows outside the
+   * parent container: https://bugs.webkit.org/show_bug.cgi?id=256781
+   * TODO FW-4734
+   */
+  grid-auto-rows: 100%;
+
   &::after {
     // This technique is used for an auto-resizing textarea.
     // The text contents are reflected as a pseudo-element that is visually hidden.