Incompatibility of matchedTransitionSource and sharedBackgroundVisibility

Take a look at following sample code.

  • verify the shapes of two toolbar buttons.
  • remove .matchedTransitionSource(id: 1, in: navigationNamespace) for one button.
  • verify the toolbar button shape is changed to normal circle shape

The combination usage of matchedTransitionSource and sharedBackgroundVisibility leads to unexpected display result. Removing any of these two view modifier restores the correct display. None of the view modifiers indicates it will crop the button shape.

struct ContentView: View {
    
    @Namespace var navigationNamespace
    
    var body: some View {
        NavigationStack {
            ZStack {
                Color.gray
            }
            .ignoresSafeArea()
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {

                    Button {
                        
                    } label: {
                        Image(systemName: "person")
                            .font(.title3)
                            .foregroundStyle(Color.accentColor)
                            .frame(width: 50, height: 50)
                            .glassEffect(
                                .regular.interactive(),
                                in: .circle
                            )
                    }
                    .matchedTransitionSource(id: 1, in: navigationNamespace)
                }
                .sharedBackgroundVisibility(.hidden)
                
                ToolbarItem(placement: .topBarTrailing) {

                    Button {
                        
                    } label: {
                        Image(systemName: "square.and.pencil")
                            .font(.title3)
                            .foregroundStyle(Color.accentColor)
                            .frame(width: 50, height: 50)
                            .glassEffect(
                                .regular.interactive(),
                                in: .circle
                            )
                    }
                    .matchedTransitionSource(id: 1, in: navigationNamespace)
                    
                }
                .sharedBackgroundVisibility(.hidden)
            }
        }
        
    }
}

#Preview {
    ContentView()
}

Are you trying to apply a transition that originates from the buttons?

Use glassEffectID(_:in:) to add transitions to views with effects in a container. This adda a morphing effects during transitions between views with Liquid Glass effects.

Morph Liquid Glass effects during transitions article has more information and code examples.

Incompatibility of matchedTransitionSource and sharedBackgroundVisibility
 
 
Q