SwiftUI clipped Image is not really clipped

January 6, 2022

In iOS 15, the following code:

import SwiftUI
struct ContentView: View {
  var body: some View {
    VStack(spacing: 0) {
      ScrollView(.horizontal) {
        HStack{ForEach(0 ..< 10, id: \.self) {Text("Item\($0)")}}
      }
      Image(systemName: "clock").resizable()
        .padding(.top, -50).frame(height: 50)
        .contentShape(Rectangle())
        .clipped()
        .onTapGesture {print("good")}
    }
  }
}

It happens that the ScrollView can’t be scrolled because the bottom Image overlays it.
How can we scroll the ScrollView?

>Solution :

The clock view is eating the taps. You need to make the clock ignore taps by adding this:

.allowsHitTesting(false)

like this:

import SwiftUI
struct ContentView: View {
  var body: some View {
    VStack(spacing: 0) {
      ScrollView(.horizontal) {
        HStack{ForEach(0 ..< 10, id: \.self) {Text("Item\($0)")}}
      }
      Image(systemName: "clock").resizable()
        .padding(.top, -50).frame(height: 50)
        .contentShape(Rectangle())
        .clipped()
        .allowsHitTesting(false)
    }
  }
}