SwiftUI cannot have working rounded corners with AsyncImage and ultra-wide photographs

I’m attempting to show a listing of photographs from panoramic webcams with following show constraints:

• rounded corners
• 16/9 facet ratio
• heart crop scale kind (picture is centered and cropped to fill out there house whereas sustaining its personal facet ratio)

following what I achieved in my Android app whereas nonetheless studying SwiftUI:

AsyncImage( // from Coil library
    mannequin = webcam.illustrationImageUrl,
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .aspectRatio(16 / 9f)
        .hazeSource(state = hazeState),
)

I attempted utilizing a mixture of resizable, scaledToFill, aspectRatio, clipped adopted by both clipToShape or background, however to no avail.

For example, this code:

AsyncImage(url: URL(string: webcam.illustrationImageUrl)) { picture in
    picture
        .resizable()
        .scaledToFill()
        .aspectRatio(16 / 9, contentMode: .match)
        .clipped()
        .clipShape(.rect(cornerRadius: 16))
} placeholder: {
    ProgressView()
}

will outcomes on this:

Clearly my rounding corners are in a large number:

• First picture: no rounded corners
• Second picture: clipped rounded corners
• Third picture: absolutely rounded corners

My understanding is as observe: form clipping appears to use to the supply picture and never to what’s truly seen (after scaling / cropping) or, the View (picture container) itself.

Why? As a result of the second picture reveals a little bit of its authentic corners, which leads to barely rounded corners whereas the second picture doesn’t show its authentic nook on account of a a lot bigger width with a lot content material left and proper out of the visible bounds. And in case you take the final picture, it’s correctly rounded, as a result of it’s displayed completely!

I additionally tried switching from scaledToFill to scaledToFit: all photographs are correctly rounded as a result of they’re now completely displayed. However on account of their various dimensions and authentic facet ratio, none respect my 16/9 facet ratio constraint:

Lastly, I additionally tried wrapping the AsyncImage and even its underlying Picture in a ZStack to which I attempted each clipToShape and containerShape, however it doesn’t change something in any respect.

Why cannot I obtain the specified consequence? Thanks for the assistance!