Liquid Glass Button animating when behind a view when `.interactive()` modifier is applied

When using the .glassEffect modifier on a button in swiftui combined with the .interactive() modifier, the button continues to show the interactive animation even when it’s covered by another element.

Example:

ZStack {
    Button {
        print("Button overlayed by ZStack") // Does not trigger, but interactive animation still plays
    } label: {
        image
    }
    .glassEffect(.regular.interactive())
    
    Rectangle().fill(.black.opacity(0.7))
}

This occurs with overlays, ZStacks, and even if the overlay is a button. Example below: EDIT: It seems like rocketsim's gif recording doesnt show the bug for some reason... really strange... Edit 2: reuploaded gif, recorded as mp4 and converted to gif seems to have worked...

Feedback ID: FB22054300

I've attached this sample app to my feedback ticket to help with debugging the issue. It doesn't look like I can share it in this post though.

I'm having the same issue when presenting an overlay on top of buttons using the interactive modifier.

Hello @vroma,

Thank you for reporting,

This is still being investigated.

As a workaround, use conditional logic to add and remove the modifier:

@State private var isShowingOverlay = true
...

// ZStack Workaround
ZStack {
    Button {}
    .glassEffect(isShowingOverlay ? .regular : .regular.interactive())

    if showOverlay {
        Rectangle().fill(.black.opacity(0.7))
    }
}

// Overlay Workaround
Button { }
.glassEffect(isShowingOverlay ? .regular : .regular.interactive())
.overlay {
    if showOverlay {
        Rectangle().fill(.black.opacity(0.7))
    }
}

If this doesn't work for your use case, provide more details how this issue is impacting you.

Any updates will be provided in Feedback Assistant.

I also encourage you to test new releases as they come and update us here if anything changes.

 Travis

Liquid Glass Button animating when behind a view when `.interactive()` modifier is applied
 
 
Q