bug: Card border radius overflows in Safari 16

[cperezabo]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

ion-card content is overflowing in Safari using Ionic 6.3.x or newer. It started happening after updating from Ionic 6.1.4, it worked as expected using that version.

Expected Behavior

Should hide overflow.

Steps to Reproduce

Create a blank project with an Ionic 6.3.x or newer version and put an ion-list inside an ion-card

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

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.3 (/Users/cristian/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.3.0
   @angular-devkit/build-angular : 14.2.5
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 14.2.5
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.4.3
   @capacitor/android : not installed
   @capacitor/core    : 3.4.3
   @capacitor/ios     : not installed

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.7.1) : 1.5.0

System:

   NodeJS : v16.17.1 (/Users/cristian/.nodenv/versions/16.17.1/bin/node)
   npm    : 8.15.0
   OS     : macOS

Additional Information

I haven't tried other versions of Ionic, I updated my project from 6.1.4 to 6.3.0 and it started happening. It also happens with Ionic 6.4.0 too.
I tried in Brave and Safari and it works as expected.
It seams to be Safari-only bug, but it breaks my PWA on mobile.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[sean-perkins]

@cperezabo thanks for reporting this issue.

Can you modify this reproduction to isolate the problem: https://stackblitz.com/edit/angular-cnclwc-yhx4lf?file=src%2Fapp%2Fexample.component.html

Testing with Safari Web Version 15.5 (17613.2.7.1.8) and the latest version of Ionic (6.4.1) I am not seeing overflowing contents based on the code snippet provided.

[cperezabo]

I just opened your example and 💥

The problem is you are using an old Safari. I'm using current v16.2

[sean-perkins]

Thanks for the extra detail @cperezabo, I am able to reproduce once updating to Safari v16.2.

As a workaround you can assign this styling to the item:

ion-item {
  overflow: inherit;
}

I need to isolate the reproduction to report to the Webkit team before determining the appropriate resolution for Ionic Framework.

[cperezabo]

I've tried to use the styles you suggest with no luck. It doesn't even work with !important.

I placed the style in global.scss

ion-item {
  overflow: inherit !important;
}

The dirty workaround I found was to use the following styles

ion-card {
  > ion-list.ios {
    border-radius: 8px;
  }

  > ion-list.md {
    border-radius: 4px;
  }
}

[sean-perkins]

@cperezabo can you test with this dev-build: 6.4.2-dev.11672163551.15de10fd?

Forked stackblitz with the dev-build: https://stackblitz.com/edit/angular-cnclwc-4myqzy

I was unable to narrow a reproduction to reproduce the issue from Safari 15 → 16 for the Webkit team. However, I was able to diagnose that contain: paint is the offending styles once updating to Safari 16. The ion-list bounding box flows outside of the ion-card, causing a painting issue with the border radius initially. Assigning contain: content on the ion-card host resolve this.

[cperezabo]

Interesting!.
I can confirm this is working as expected 🎉

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.