Clipped not actually clips the Image in SwiftUI

Question

I am trying to clip the image and as we see the UI it looks fine but actually it doesn't clip the image which causes other UI elements to unresponsive.

Here the code I am using.

struct ImageContentView: View {
    var urls:[String] = [
        "https://lh3.googleusercontent.com/proxy/80im-IBfLODpLDj8d02uEpSVIhqdjen6H6CeFwgRBxeua-Dgw0R3WONFj1Gk8CwB_MufmC9rQ8qHjyWMejwFcJ1PA2s8AAu5WVsmJA=s0-d",
        "https://wallpaperaccess.com/full/530919.jpg"
    ] 
    var body: some View {
        ScrollView{
            VStack{
                Button(action: {
                    
                }, label: {
                    Text("Hello")
                })
                VStack(spacing: 20.0) {
                    ForEach(self.urls, id:\.self) { url in
                        WebImage(url: URL.init(string: url)!)
                            .resizable()
                            .aspectRatio(contentMode: ContentMode.fill)
                            .frame(height: UIScreen.main.bounds.size.width * 0.5) 
                            .clipped()
                            .cornerRadius(10.0)
                            .shadow(color: Color.red, radius: 10.0, x: 0, y: 0)
                    }
                }.padding()
            }
        }
    }
}    

Incorporate

I tried ContentShape as well as ClipShape but didn't work. – Incorporate

Any update on this one? Did you find a solution? – Squirrel

clipShape and contentShape work for me – Indra

Answer 1

Here is fixed part (tested with Xcode 12 / iOS 14)

VStack(spacing: 20.0) {
    ForEach(self.urls, id:\.self) { url in
        WebImage(url: URL.init(string: url)!)
            .resizable()
            .aspectRatio(contentMode: ContentMode.fill)
            .frame(height: UIScreen.main.bounds.size.width * 0.5)
            .clipped()
            .cornerRadius(10.0)
            .shadow(color: Color.red, radius: 10.0, x: 0, y: 0)
    }.contentShape(Rectangle())   // << here !!
}.padding()

Note: I don't know what is your WebImage but with Image and local images it was reproduced as well, so fix was tested.

Blondy

WebImage is from SDWebImageSwiftUI library – Incorporate

This doesn't work for me. I am downloading the image from URL and display it – Incorporate

Then it is bug in WebImage as well, because above works for Image. You can try also to put .contentShape on VStack. – Blondy

Thanks! Simply adding the contentShape Rectangle modifier solved the problem for me. – Medallist

It should be noted that it's important that the .contentShape(Rectangle()) line should be any line after .clipped() – Sarmentum

Answer 2

iOS 13 and +

An other solution is combine compositingGroup and clipped:

That wraps this view in a compositing group and clips.

Note: Respect this order compositingGroup and clipped

Image(..)            
.compositingGroup()
.clipped() 

Petrography

Answer 3

I have tried for the above methods but still not working. Here is another solution for someone who have the same struggle, maybe this can help you :) This line is to disable the tap gesture of the image.

Image(uiImage: image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 100, height: 100)
.contentShape(RoundedRectangle(cornerRadius: 8))
.allowsHitTesting(false) // <- this is the line

Alvord