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()
}