Preventing animation glitch when dismissing a Menu with glassEffect

Hi everyone,

I’m running into a strange animation glitch when using a Menu inside a glassEffect container.

Here’s a minimal example:

import SwiftUI

struct ContentView: View {
    @Namespace private var namespace
    
    var body: some View {
        ZStack {
            Image(.background)
                .resizable()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .ignoresSafeArea()
            
            GlassEffectContainer {
            HStack {
                    Button("b1") {}
                    Button("b2") {}
                    Button("b3") {}
                    Button("b4") {}
                    Button("b5") {}
                    Menu {
                        Button("t1") { }
                        Button("t2") { }
                        Button("t3") { }
                        Button("t4") { }
                        Button("t5") { }
                    } label: {
                        Text("Menu")
                    }
                }
            }
            .padding(.horizontal)
            .frame(height: 50)
            .glassEffect()
        }
    }
}

What happens:

The bar looks fine initially:

When you open the Menu, the entire bar morphs into the menu:

When dismissing, the bar briefly animates into a solid rectangle before reapplying the glass effect:

Questions:

  1. Is there a way to prevent that brief rectangle animation when dismissing the menu?
  2. If not, is it possible to avoid the morphing altogether and have the menu simply overlay on top of the bar instead of replacing it?

Any ideas or workarounds would be greatly appreciated!

Preventing animation glitch when dismissing a Menu with glassEffect
 
 
Q