How one can make a Button work inside a ScrollView however exterior of the ScrollView’s bounds in SwiftUI?

I noticed a bizarre habits and I consider it is a bug in SwiftUI however possibly it isn’t or somebody is aware of a approach to repair it.

By default, overlays have the identical measurement because the view they’re hooked up to in SwiftUI. Nevertheless, they are often bigger if their content material is bigger. They will additionally draw content material exterior of the view’s bounds. For instance, the next view has an overlay that’s offset in order that the button within the overlay is drawn fully out of the bounds of the button on which it’s hooked up:

struct SimpleView: View {
    var physique: some View {
        VStack {
            Button {
                // Motion not related...
            } label: {
                Picture(systemName: "globe")
                    .font(.largeTitle)
                Textual content("Button").fixedSize()
            }
            .foregroundStyle(.white)
            .buttonStyle(.glassProminent)
            .overlay {
                Button {
                    // Not executed when button is tapped exterior of the ScrollView's bounds
                    print("Overlay button tapped!")
                } label: {
                    Picture(systemName: "data.bubble.fill.rtl")
                        .font(.largeTitle)
                        Textual content("Overlay Button").fixedSize()
                }
                .foregroundStyle(.tint)
                .buttonStyle(.glass)
                .offset(x: -80, y: 80)
            }
        }
        .padding(16)
    }
}

On this view, I can faucet the button. It react to my touched a prints "Overlay button tapped!" to the console, so its motion is executed.

Nevertheless, after I wrap the identical view inside a easy ScrollView, this performance out of the blue breaks:

struct InScrollView: View {
    var physique: some View {
        ScrollView {
            SimpleView()
        }
        .scrollClipDisabled()
        .background(.yellow)
    }
}

The button nonetheless visually reacts to my touches, however its motion is now not executed after I faucet the button exterior of the ScrollView‘s bounds – indicated by the yellow background.

• If you faucet the button contained in the yellow space, it prints "Overlay button tapped!" to the console.
• If you the button exterior of yellow space, it does not print something.

Word: I would like the scrollClipDisabled modifier as a result of ScrollViews clip their content material at their bounds by default in order that nothing is drawn exterior. This could minimize off the overlay, however I need the complete overlay to be drawn. Sadly, it looks like this modifier solely disables view clipping, however not "contact clipping".

Any concepts on find out how to make this work?