fix(textarea): stacked/floating textarea size is correct on safari (#27766)

Issue number: resolves #27345

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

WebKit has a bug where children of grid elements placed inside flex
elements have the wrong size. This is causing textarea's dimensions to
spill out of its grid container. Grid is used for autogrow
functionality, and the grid itself is placed inside `.label-wrapper`
which uses flexbox for aligning the label and control.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds `grid-auto-rows: 100%` to avoid the WebKit bug which specifies
the size of implicitly-created grid rows.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


Dev build: `7.1.3-dev.11688748118.18ff9e7d`
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=256781

---------

Co-authored-by: ionitron <hi@ionicframework.com>

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`));
+    });
+  });
 });

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.