bug: ion-card has no rounded corners

[r345on]

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 has no rounded corners on ios platform

Expected Behavior

ion-card should have rounded corners on ios platform

Steps to Reproduce

• create a component with ion-card
• open the component
• zoom in and see the difference with and without transform: translateZ(0) in ion-card.ios

Code Reproduction URL

No response

Ionic Info

After this commit 174c3b3 there is no transform: translateZ(0) in ion-card.

Additional Information

No response

[liamdebeasi]

Thanks for the report. Can you please provide a reproduction of this issue? I am testing on my end, and the border radius shows up as expected: https://codepen.io/liamdebeasi/pen/ZEoPYaK

[NLueg]

I actually have the same issue in my app.
I can't provide a reproduction of this issue, but I can show you screenshots of the app on my iPad with version 6.2.7 and 6.2.8 (or above). The difference between both pictures is only the update of the version.
I overwrite the border-radius on my own with this code:

--default-border-radius: 25px;

ion-card {
  border-radius: var(--default-border-radius);
}

Before the update

After the update

[liamdebeasi]

Thanks for the additional information. However, I still need a reproduction case so I can fix the issue. Are you able to reproduce this issue in an Ionic starter app?

[NLueg]

Okay, never mind, I tried to reproduce the issue in a starter app.
The issue were, that I had a structure like this inside the card:

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

Which leads to the problem that the list overlays the border-radius of the card ... This can be fixed in my case by applying the border-radius also to the ion-list or by using the ion-card-content element.
So the problem was probably sitting in front of the computer. Sorry for the circumstances 🙄

[liamdebeasi]

No problem. WebKit, the engine that powers Safari, has some issues with border-radius values. The transform: translateZ(0) that was on ion-card forced the component to be composited, which likely avoided the browser bug. That transform was triggering a WebKit out of memory issue, so we removed it.