SwiftUI: scrolling on 3 wheel pickers inside a HStack is inaccurate - swiftui

Question

I have 3 wheel pickers inside a HStack to allow for selecting hours, minutes, and seconds.
Here's the playground code to help illustrate the issue:
import SwiftUI
import PlaygroundSupport
struct DurationPickers: View {
#State private var hourSelection = 0
#State private var minuteSelection = 0
#State private var secondSelection = 0
private let hoursArray = [Int](0..<24)
private let minutesArray = [Int](0..<61)
private let secondsArray = [Int](0..<61)
private let fullHeight: CGFloat = 256
var body: some View {
GeometryReader { geometry in
VStack(spacing: 0) {
HStack(spacing: 0) {
Text("Hours")
.frame(maxWidth: .infinity)
Text("Minutes")
.frame(maxWidth: .infinity)
Text("Seconds")
.frame(maxWidth: .infinity)
}
.frame(maxWidth: .infinity)
HStack(spacing: 0) {
Picker(selection: self.$hourSelection, label: Text("")) {
ForEach(0 ..< self.hoursArray.count, id:\.self) { index in
Text("\( self.hoursArray[index])").tag(index)
}
}
.pickerStyle(WheelPickerStyle())
.frame(width: geometry.size.width/3, alignment: .center)
Picker(selection: self.$minuteSelection, label: Text("")) {
ForEach(0 ..< self.minutesArray.count, id:\.self) { index in
Text("\( self.minutesArray[index])").tag(index)
}
}
.pickerStyle(WheelPickerStyle())
.frame(width: geometry.size.width/3, alignment: .center)
Picker(selection: self.self.$secondSelection, label: Text("")) {
ForEach(0 ..< self.secondsArray.count, id:\.self) { index in
Text("\( self.secondsArray[index])").tag(index)
}
}
.pickerStyle(WheelPickerStyle())
.frame(width: geometry.size.width/3, alignment: .center)
}
.frame(maxWidth: .infinity)
}
}
.frame(maxHeight: fullHeight)
.background(Color.gray)
}
}
struct ContentView: View {
var body: some View {
VStack {
Spacer()
DurationPickers()
}
.frame(width: 480, height: 600)
}
}
PlaygroundPage.current.setLiveView(ContentView())
The result of the code is this:
This looks exactly as I expect and want. However, when I try to select the hours for example, I have to scroll from the left half of the red area, otherwise minutes would start scrolling. The same happens if you scroll on minutes from the right half of the orange rectangle.
Any idea why it's behaving like this? Any suggestions to fix this?

Answer 1

In case someone else is having a similar issue, I just found a solution posted on Apple's forums two weeks ago.
Previously, this behaviour was fixed by adding:
.compositingGroup().clipped()
As suggested in some of Asperi's answers. However, this solution have stopped working (probably since the release of iOS 15.1, but maybe later).
The solution that works now on iOS 15.4 is adding the following extension:
extension UIPickerView {
open override var intrinsicContentSize: CGSize {
return CGSize(width: UIView.noIntrinsicMetric, height: super.intrinsicContentSize.height)
}
}
Not really sure what exactly is this doing and whether it might introduce other issues, but I'll go with it for now and keep testing!