Clipped not actually clips the Image

[linusmimietz]

Clipping the image only seems visually fine in the UI. Unfortunately elements below become unresponsive.

It was also reported here on StackOverflow: https://stackoverflow.com/questions/63300411/clipped-not-actually-clips-the-image-in-swiftui/63301282

That's my code to reproduce:

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            WebImage(url: URL(string: "https://i.imgur.com/s3ptEuh.png")!)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(maxHeight: 400)
                .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
                .shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 20)
            HStack() {
                VStack(alignment: .leading) {
                    Text("Name")
                        .font(.headline)
                    Text("Date")
                }
                Spacer()
                Button(action: { print("Test") }) {
                    Image(systemName: "bookmark"))
                        .foregroundColor(.white)
                        .font(.system(size: 16, weight: .medium))
                        .frame(width: 36, height: 36)
                        .background(Color(.systemBlue))
                        .clipShape(Circle())
                }
            }
            .padding(.horizontal, 12.0)
            .padding(.vertical, 8.0)
        }
        .background(Color(.systemGray5))
        .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
    }

[AnnieNinaJoyceV]

Any fixes or workarounds yet?

[linusmimietz]

@AnnieNinaJoyceV After some research, I found that I didn't need the library since loading web images is possible with standard SwiftUI. I created a gist to share the basic concept: https://gist.github.com/linusmimietz/2537046ca31940c871d92e633dc33923

[AnnieNinaJoyceV]

Thank you @linusmimietz! I'll check it out.

[dreampiggy]

I think this issue already been fixed ? The reproduce code seems works as expected:

[USBA]

Here's the fix: Use the .contentShape modifier after the .clipShape modifier.

Ex:

WebImage(url: URL(string: "https://i.imgur.com/s3ptEuh.png")!)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(maxHeight: 400)
                .clipShape(RoundedRectangle(cornerRadius: 10))
                .contentShape(RoundedRectangle(cornerRadius: 10)) // <-- here