onTapGesture does only partially work on a ZStack

I have build a ZStack containing an image, an overlay and a systemImage. I want to open a sheet when the user taps on this image but it only works when the user clicks on a very specific point on the very bottom of the ZStack. Does anyone know how I can make this work? And also why this doesn't work? My code:

NavigationView {
        VStack {
            VStack {
                ZStack {
                    if let image = pfimage {
                        Image (uiImage: image)
                            .resizable()
                            .frame(width: 100, height: 100)
                    } else {
                        Image ("testimage")
                            .resizable()
                            .frame(width: 100, height: 100)
                    }
                    Image(systemName: "photo")
                        .resizable()
                        .frame(width: 30, height: 25)
                        .foregroundColor(Color.white)
                    
                }
                .clipShape(Circle())
                .contentShape(Circle())
                .onTapGesture {
                    print("tap")
                    changepfsheet = true
                }
                
                Text("Displayname")
                    .padding(.top)
                    .foregroundColor(Color.white)
                    .font(.title3)
            }
            .frame(width: UIScreen.main.bounds.width, height: 225)
            .background(Color.red)
            
            HStack {
                Image(systemName: "person.2.circle")
                
                TextField("Enter newdisplayname", text: $newdisplayname)

            }
            .padding()
            .background(Color.gray.opacity(0.1))
            .cornerRadius(10)
            .padding(.horizontal)
            .padding(.top, 25)
                  
            Text("Change displayname")
            

            
            Spacer()
            

            HStack {

                Spacer()
                Text("Change password")
                    .foregroundColor(Color.white)
                Spacer()
                Image(systemName: "key")
                    .foregroundColor(Color.white)
            }
            .padding()
            .background(Color.red)
            .cornerRadius(15)
            .padding(.horizontal)
            .padding(.bottom, 5)
            
            HStack {
                Spacer()
                Text("Logout")
                Spacer()
            }
            .padding(.horizontal)
            .padding(.bottom, 20)
        }
        .edgesIgnoringSafeArea(.top)
        Spacer()
    }
    .navigationBarHidden(false)
    .navigationBarBackButtonHidden(false)

Solution

You have interfering tap gestures. Instead, just have one tap gesture on the ZStack. Now you can tap anywhere on it:

ZStack {
    Image(uiImage: image)
        .resizable()
        .frame(width: 100, height: 100)

    Color.black.opacity(0.5)
        .frame(width: 100, height: 100)

    Image(systemName: "photo")
        .resizable()
        .frame(width: 30, height: 25)
        .foregroundColor(.white)
}
.clipShape(Circle())
.contentShape(Circle())
.onTapGesture {
    print("tap")
    showsheet = true
}

I suspect the real issue is that you using a NavigationView, and putting content behind where the title would be. That means that you can't click through the view that the title is in, even if it's an empty title. You should either remove the NavigationView (as you aren't making use of it) or don't ignore safe area and use a NavigationView as you should do.

Removing edgesIgnoringSafeArea(.top) makes your code work, because the content will no longer be behind the navigation bar.