onTapGesture event is confused in nested ScrollView

[opleonnn]

Check List

Thanks for considering to open an issue. Before you submit your issue, please confirm these boxes are checked.

• I have read the wiki page and cheat sheet, but there is no information I need.
• I have searched in existing issues, but did not find a same one.
• I want to report a problem instead of asking a question. It'd better to use kingfisher tag in Stack Overflow to ask a question.

Issue Description

KFImage onTapGesture event is confused in nested ScrollView

What

I used KFImage in the nested ScrollView, and add onTapGesture event to printing index for every KFImage, and the wrong index will be printed.

Reproduce

ScrollView {
            VStack {
                ScrollView(.horizontal) {
                    HStack(spacing: 15) {
                        ForEach(0..<3) { index in
                            KFImage(URL(string: imageURLs[index]))
                                .resizable()
                                .scaledToFill()
                                .frame(width: 300, height: 400)
                                .clipped()
                                .onTapGesture {
                                    print(index)
                                }
                        }
                    }
                }
                .background(Color.yellow)
            }
        }
}

click KFImage in turn, printed 1, 1, 2.

[onevcat]

@opleonnn

I played with this code and it prints out exactly "0, 1, 2" to me.

So can it be a SwiftUI version or iOS system version issue?

I tried on Xcode 14.3 with an iPhone 14 Pro simulator with iOS 16.4. Can you verify the behavior too? Or do you have any comments on the reproducible SDK/device versions?

[opleonnn]

@onevcat
Thank you for your test!
I may have found the cause, the problem is that the url of my image is not standard. I'm not sure if Kingfisher should be compatible with these errors, if not, please close this issue.

These are the image URLs I used for testing:

let imageURLs = [
    "https://static.freebeatfit.com/course/image/2d3e0b78e2ae4bacb984c388ae66d54e.15",
    "https://static.freebeatfit.com/course/image/9147882e1ab9460495f8e52edc9beaa5.03",
    "https://static.freebeatfit.com/course/image/bfbebb6ff9214719885a561953db947f.jpeg"
]

[onevcat]

It is quite surprising! Let me check it later.

[onevcat]

OK, it is a notorious thing that related to the image size (difference between its visual size and its content size)

I suggest you insert a contentShape to allow SwiftUI to have the correct tapping detecting size. If I am correct, this should work:

KFImage(URL(string: imageURLs[index]))
    .resizable()
    .scaledToFill()
    .frame(width: 300, height: 400)
    .clipped()
+   .contentShape(Rectangle())
    .onTapGesture {
        print(index)
    }

[opleonnn]

Interesting. I thought it was only effective for Spacer().
Thanks for your patience! @onevcat