MatchedGeometryEffect in case of .size

[igor]

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.

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