fix(card): border radius does not overflow on paint in Safari

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

In Safari 16:

<ion-card>
  <ion-list>
    <ion-item></ion-item>
  </ion-list>
</ion-card>

The card border radius is not respected on the initial paint and the list edges will overflow the container. This is not present in Safari 15.

Isolating the styles, the contain: content (specifically contain: paint) causes the list overflow to be visible in Safari 16.

Reproduction of issue: https://stackblitz.com/edit/angular-cnclwc-yhx4lf

Issue URL: #26529

What is the new behavior?

• Applies contain: content on the ion-card so that the descendents overflows respect the containing element's box sizing.
• ion-card border radius does not overflow in Safari 16.

Reproduction with dev-build changes: https://stackblitz.com/edit/angular-cnclwc-4myqzy

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 6.4.2-dev.11672163551.15de10fd

[liamdebeasi]

Why are there diffs on Google Chrome?

[liamdebeasi]

@sean-perkins Do we still want to merge this?

[sean-perkins]

@liamdebeasi yes I do, I need to rebase and re-run the screenshot job as well. I don't have an answer as to why there are diffs in Google Chrome - outside of the assumption that these styles have a minor visual rendering difference on Chrome (but oddly for only 1 specific template).

[sean-perkins]

Ok - it looks like the diff is consistent, but I would be comfortable moving forward with it for the benefit it brings (solving the Safari 16 border radius overflow).

[liamdebeasi]

I'm fine moving forward with this. There is a slight change to chrome, but that could be intentional based on how contain: content was implemented in that browser. The value add (fixing this bug in Safari) is greater than the small layout change in Chrome.