模拟器和电话不显示相同的匹配几何效果结果

Question

I have a very simple example where I want to make a square larger. In the simulator everything looks fine but when I run it on the phone the square becomes transparent.

On simulator

On phone

Content View

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext
    @Namespace var animation
    @State var isBig:Bool = false
    var body: some View {
        ZStack {
            Color(.red)
            if(!isBig){
                RectangleViewSmoll(isBig:$isBig, animation: animation)
            }
            if(isBig){
                RectangleViewBig(isBig:$isBig,animation: animation)
            }
        }
        .ignoresSafeArea()
    }
}

Small Rectangle

struct RectangleViewSmoll: View {
    @Binding var isBig:Bool
    var animation:Namespace.ID
    var body: some View {
        Rectangle()
            .matchedGeometryEffect(id: "rectangle", in: animation)
            .frame(width: 50, height: 50)
            .onTapGesture {
                withAnimation(.easeIn(duration: 2)){
                    isBig.toggle()
                }
            }
    }
}

Big rectangle

struct RectangleViewBig: View {
    @Binding var isBig:Bool
    var animation:Namespace.ID
    var body: some View {
        Rectangle()
            .matchedGeometryEffect(id: "rectangle", in: animation)
            .frame(width: 500, height: 500)
            .onTapGesture {
                withAnimation(.easeIn(duration: 2)){
                    isBig.toggle()
                }
            }
    }
}

Answer 1

The problem is with the animation line, try like this will fix your problem:

Rectangle()
            .matchedGeometryEffect(id: "rectangle", in: animation)
            .frame(width: 500, height: 500)
            .onTapGesture {
                isBig.toggle()
            }
            .animation(.easeIn(duration: 2))