Kingfisher image elements untappable on iOS 18

[danieldaquino]

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. (Note: I found a similar one that provides a clue)
• 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

There seems to be a regression on the tapping detection of Kingfisher image elements (We are using KFAnimatedImage) on SwiftUI caused by the introduction of iOS 18.

What

We have found that KFAnimatedImage is no longer recognizing onTapGesture on its own on iOS 18

Reproduce

Device: Probably any iOS device (I used iPhone 13 mini and iPhone SE simulator)
iOS: 18.0 (I also used iOS 17.5 as a baseline)
Kingfisher: I am using 8.0.1 (Also reproducible on some 7.x versions)
Xcode: I am using Xcode 16.0 (16A242d)

I wrote a minimal example that reproduces the problem:

import SwiftUI
import Kingfisher

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            TapGestureExampleKFAnimatedImage()
            TapGestureExampleAsyncImage()
        }
    }
}

struct TapGestureExampleKFAnimatedImage: View {
    @State var tapCount = 0
    let url = URL(string: "https://images.unsplash.com/photo-1722359945617-5cd0ea1a628f?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")!

    var body: some View {
        VStack {
            Text("KFAnimatedImage")
                .bold()
            KFAnimatedImage(url)
                .aspectRatio(contentMode: .fit)
                .frame(width: 200, height: 200)
                .onTapGesture {
                    tapCount += 1
                }
            Text("Tap count: \(tapCount)")
        }
    }
}

struct TapGestureExampleAsyncImage: View {
    @State var tapCount = 0
    let url = URL(string: "https://images.unsplash.com/photo-1722359945617-5cd0ea1a628f?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")!

    var body: some View {
        VStack {
            Text("AsyncImage")
                .bold()
            AsyncImage(url: url) { image in
                image.resizable()
            } placeholder: {
                ProgressView()
            }
            .aspectRatio(contentMode: .fit)
            .frame(width: 200, height: 200)
            .onTapGesture {
                tapCount += 1
            }
            Text("Tap count: \(tapCount)")
        }
    }
}

#Preview {
    ContentView()
}

Here is the behavior, side-by-side, between running this on iOS 17.5 and iOS 18:

iOS 17.5	iOS 18.0

As shown in the videos above, KFAnimatedImage detects onTapGesture elements on iOS 17.5, but not on iOS 18.

Other Comment

I found this comment on a separate issue: #2046 (comment)

and applying a similar patch as follows:

struct TapGestureExampleKFAnimatedImage: View {
    @State var tapCount = 0
    let url = URL(string: "https://images.unsplash.com/photo-1722359945617-5cd0ea1a628f?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")!

    var body: some View {
        VStack {
            Text("KFAnimatedImage")
                .bold()
            KFAnimatedImage(url)
                .aspectRatio(contentMode: .fit)
                .frame(width: 200, height: 200)
+                 .contentShape(Rectangle())
                .onTapGesture {
                    tapCount += 1
                }
            Text("Tap count: \(tapCount)")
        }
    }
}

does seem to solve the issue. However, I am concerned that this workaround is a bit counter-intuitive to use on every usage and may lead to hard-to-debug issues in the future. Is there a way we can fix this within KFAnimatedImage?

[onevcat]

Thanks for reporting this.

It seems this issue is a regression in iOS 18, likely due to Apple rewriting some gesture-related code as they advertised. The simplest example to reproduce the problem is:

struct ContentView: View {
    @State private var count = 0
    var body: some View {
        VStack {
            Text("Count: \(count)")
            MyUIView()
                .frame(width: 200, height: 200)
                .onTapGesture { count += 1 }
        }
        .padding()
    }
}

struct MyUIView: UIViewRepresentable {
    func updateUIView(_ uiView: UIViewType, context: Context) { }
    func makeUIView(context: Context) -> some UIView {
        UIImageView(image: UIImage(systemName: "person.crop.circle"))
    }
}

To align the behavior with iOS 17 and earlier, the following adjustment is the simplest solution:

func makeUIView(context: Context) -> some UIView {
-   UIImageView(image: UIImage(systemName: "person.crop.circle"))
+   let v = UIImageView(image: UIImage(systemName: "person.crop.circle"))
+   v.isUserInteractionEnabled = true
+   return v
}

The contentShape added to KFAnimatedImage seems to have a side effect of enabling user interaction on the image view. So it just happened to "fix" the issue.

I can’t confirm if this is intended behavior by Apple, but given that KFAnimatedImage is essentially a wrapper around UIImageView in UIKit, it now respects the isUserInteractionEnabled property (which is false in fact) in iOS 18.

As a workaround, I’ll apply this change to KFAnimatedImage by setting the isUserInteractionEnabled to true to restore behavior similar to earlier iOS versions. It also allows us to share the same behavior between a normal KFImage and its animated version KFAnimatedImage.

If the users wants a "click-through" behavior, they can apply a .allowsHitTesting(false) modifier for the purpose.

[onevcat]

Fixed in 8.0.3.

[danieldaquino]

Thank you @onevcat!

[ChungPhanNgoc]

Hello all.
Now I'm having the problem that the images are no longer animated. Maybe the problem is with iOS 18. Anyone have a solution?