title: Clickable area of SwiftUI Picker overlapping
body: <p>I am currently trying to create a page with three adjacent <code>Picker</code> views inside of an <code>HStack</code> as seen below:</p>
  <p><a href="https://i.stack.imgur.com/ICOv8.png?s=256" rel="noreferrer"><img src="https://i.stack.imgur.com/ICOv8.png?s=256" alt="enter image description here" /></a></p>
  <p>I made a <code>CustomPicker</code> view where I limit the frame to 90 x 240, and then use <code>.compositingGroup()</code> and <code>.clipped()</code> to make the selectable area of each picker not overlap.</p>
  <p><strong>CustomPicker.swift</strong></p>
  <pre><code>import SwiftUI
  
  struct CustomPicker: View {
      @Binding var selection: Int
      let pickerColor: Color
      
      var numbers: some View {
          ForEach(0...100, id: \.self) { num in
              Text(&quot;\(num)&quot;)
                  .bold()
          }
      }
      
      var stroke: some View {
          RoundedRectangle(cornerRadius: 16)
              .stroke(lineWidth: 2)
      }
      
      var backgroundColor: some View {
          pickerColor
              .opacity(0.25)
      }
      
      var body: some View {
          Picker(&quot;Numbers&quot;, selection: $selection) {
              numbers
          }
          .frame(width: 90, height: 240)
          .compositingGroup()
          .clipped()
          .pickerStyle(.wheel)
          .overlay(stroke)
          .background(backgroundColor)
          .cornerRadius(16)
      }
  }
  </code></pre>
  <p><strong>ChoicePage.swift</strong></p>
  <pre><code>struct ChoicePage: View {
      @State var choiceA: Int = 0
      @State var choiceB: Int = 0
      @State var choiceC: Int = 0
      
      var body: some View {
          HStack(spacing: 18) {
              CustomPicker(selection: $choiceA, pickerColor: .red)
              CustomPicker(selection: $choiceB, pickerColor: .green)
              CustomPicker(selection: $choiceC, pickerColor: .blue)
          }
      }
  }
  </code></pre>
  <p>When testing both <code>CustomPicker</code> and <code>ChoicePage</code> in the preview canvas and simulator, it had worked perfectly fine, but when I tried to use it on my physical devices (iPhone 8 and iPhone 13, both on iOS 15.1) the clickable areas overlap. I have tried solutions from <a href="https://stackoverflow.com/questions/62110421/how-to-stop-a-swiftui-picker-from-reacting-to-touches-outside-its-visible-area">this post</a> and <a href="https://developer.apple.com/forums/thread/687986?answerId=685001022#685001022" rel="noreferrer">this post</a>, as well as many others, but nothing seems to be working for me.</p>