Hi, hoping for some help with this really peculiar buggy interaction.
We have a screen that has a TabView, where each tab displays different data to the user. Directly above that TabView (zero spacing/padding), we have a horizontal ScrollView with buttons that can control which tab to show.
The problem we're having is that with this layout, the TabView seems to impact the pressable hitbox of the buttons above it. Marked in red in the screenshot below, you can see the area that no longer is pressable in the blue buttons within the ScrollView.
If the TabView is not present, the blue buttons act exactly as you'd expect and are fully pressable. It's specifically the interaction together that creates the issue. Similarly, if it was a single button and not a ScrollView above the TabView, it would be pressable as expected. Finally, if there was spacing between the TabView and ScrollView, we'd also not have the issue, but our design wants them directly next to each other.
Below is a minimal code example that reproduces the issue.
A current theory is that it may be related to the scroll indicator "absorbing" the press gesture because you can still perform a drag gesture within this "dead" space.
Any help would be massively appreciated, I've tried all I can think of, but this seems like a SwiftUI bug at this point.
// ScrollView + TabView bug.
// Notice the bottom half of the blue buttons are not pressable. If you remove the TabView, they are pressable.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing: 0) {
/// Horizontal ScrollView with blue buttons
ScrollView(.horizontal) {
HStack(spacing: 8) {
ForEach(0..<10) { _ in
Button(action: { print("Button press") }) {
Rectangle().fill(.blue).frame(width: 50, height: 40)
}
}
}
}
/// TabView with a single big green button
TabView {
Button( action: { print("Tab press") }) {
Rectangle().fill(.green)
}
}
.tabViewStyle(.page(indexDisplayMode: .never))
}
.padding()
}
}
Screenshot below shows the area that becomes un-pressable for each button marked in the red box. The blue area above the red box remains pressable.