MatchedGeometryEffect in case of .size

I'm trying to get the same view for the first column as the second one using MatchedGeometryEffect in applying only property .size but the behavior is not as I expect. The elements of the first column replicate the size but positions are strange as you can see on the screen. What might be wrong ? or this is a bug ?!

the behavior is the same even if I put all elements in the same VStack

static let size: MatchedGeometryProperties
The view’s size, in local coordinates.

Screenshot 2021-04-16 at 16.51.57

import SwiftUI

struct ContentView: View {

    @Namespace var ns

    var body: some View {
        HStack {
            //first column
            ScrollView {
                VStack(spacing: 0)  {
                    Rectangle()
                        .matchedGeometryEffect(id: "ID1", in: ns, properties: .size, isSource: false)
                    Rectangle()
                        .matchedGeometryEffect(id: "ID2", in: ns, properties: .size, isSource: false)
                }.background(Color.green)
            }

            //second column
            ScrollView {
                VStack(spacing: 0) {
                    Rectangle().frame(width: 100, height: 25)
                        .border(Color.blue)
                        .matchedGeometryEffect(id: "ID1", in: ns, properties: .size, isSource: true)
                    Rectangle().frame(width: 100, height: 50)
                        .border(Color.blue)
                        .matchedGeometryEffect(id: "ID2", in: ns, properties: .size, isSource: true)
                }.background(Color.red)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

or a little bit diff layout, and again not the same. In this case there's some unexpected extra spacing between elements

import SwiftUI

struct ContentView: View {

    @Namespace var ns

    var body: some View {
        HStack {
            //first column
                VStack(spacing: 0) {
                    Rectangle()
                        .matchedGeometryEffect(id: "ID1", in: ns, properties: .size, isSource: false)
                    Rectangle()
                        .matchedGeometryEffect(id: "ID2", in: ns, properties: .size, isSource: false)
                    Spacer()
                }.background(Color.green)

            //second column
                VStack(spacing: 0) {
                    Rectangle().frame(width: 100, height: 25)
                        .border(Color.blue)
                        .matchedGeometryEffect(id: "ID1", in: ns, properties: .size, isSource: true)
                    Rectangle().frame(width: 100, height: 50)
                        .border(Color.blue)
                        .matchedGeometryEffect(id: "ID2", in: ns, properties: .size, isSource: true)
                    Spacer()
                }.background(Color.red)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Terms of Service

Privacy Policy

Cookie Policy