Combining Matched Geometry with New Zoom Navigation Transitions in iOS 18

With the introduction of the new matchedTransitionSource from iOS 18, we can apply a zoom transition in the navigation view using .navigationTransition(.zoom) This works well for zoom animations.

However, when I try to apply a matched geometry effect to views that are similar in the source and destination views, the zoom transition works, but those views don't transition seamlessly as they do with a matched geometry effect.

Is it possible to still use matched geometry for subviews of the source and destination views along with the new navigationTransition?

Here’s a little demo that reproduces this behaviour:

struct ContentView: View {
    let colors: [[Color]] = [
        [.red, .blue, .green],
        [.yellow, .purple, .brown],
        [.cyan, .gray]
    ]
    
    @Namespace() var namespace
    
    var body: some View {
        NavigationStack {
            Grid(horizontalSpacing: 50, verticalSpacing: 50) {
                ForEach(colors, id: \.hashValue) { rowColors in
                    GridRow {
                        ForEach(rowColors, id: \.self) { color in
                            NavigationLink {
                                DetailView(color: color, namespace: namespace)
                                    .navigationTransition(
                                        .zoom(
                                            sourceID: color,
                                            in: namespace
                                        )
                                    )
                                    .edgesIgnoringSafeArea(.all)
                            } label: {
                                ZStack {
                                    RoundedRectangle(cornerRadius: 5)
                                        .foregroundStyle(color)
                                        .frame(width: 48, height: 48)
                                    
                                    Image(systemName: "star.fill")
                                        .foregroundStyle(Material.bar)
                                        .matchedGeometryEffect(id: color,
                                                               in: namespace,
                                                               properties: .frame, isSource: false)
                                }
                            }
                            .matchedTransitionSource(id: color, in: namespace)
                        }
                    }
                }
            }
        }
    }
}

struct DetailView: View {
    var color: Color
    let namespace: Namespace.ID
    
    var body: some View {
        ZStack {
            color

            Image(systemName: "star.fill")
                .resizable()
                .foregroundStyle(Material.bar)
                .matchedGeometryEffect(id: color, 
                                       in: namespace,
                                       properties: .frame, isSource: false)
                .frame(width: 100, height: 100)
        }
        .navigationBarHidden(false)
    }
}

#Preview {
    ContentView()
}