SwiftUI - offset is wrong - swiftui

Question

I came across this weird thing where I overlay two diffrent views. These two views contain a ForEach loop where it creates a Rectangle element. The offset of this rectangle is determined by the index of the ForEach loop * a set height variable of 30. One of the view's rectangles have a height of 1 while he other view's rectangle has as a height of this height variable. This should create a rectangle with a border. But it doesn't, the two views don't match up?
I have no clue why this happens. Of course if I wanted a Rectangle with a border I could do that but that's not my point. Im genuinely curious as why this happens. Code is below.
First view:
import SwiftUI
struct test: View {
var body: some View {
VStack(spacing: 0) {
ForEach(0 ..< 10) { i in
Rectangle()
.fill(Color.green)
.frame(height: 1)
.offset(y: CGFloat(height*i))
}
Spacer()
}
}
}
struct test_Previews: PreviewProvider {
static var previews: some View {
test()
}
}
Second View:
import SwiftUI
struct test2: View {
var body: some View {
VStack(spacing: 0) {
ForEach(0 ..< 5) { i in
Rectangle()
.fill(Color.red)
.frame(height: CGFloat(height))
.offset(y: CGFloat(height*i))
}
Spacer()
}
}
}
struct test2_Previews: PreviewProvider {
static var previews: some View {
test2()
}
}
ContentView:
import SwiftUI
public var height = 30
struct ContentView: View {
var body: some View {
test2()
.overlay(test())
}
}
Result:

Answer 1

use this in test:
.offset(y: CGFloat((height*i)-i))

Answer 2

Say both test and test2 starts at y = 0.
Your first green rectangle locates between y=0 and y=1, and offset by 30
Your second green rectangle locates between y=31 and y=32
Third between y=62 and y=63
⋮
Your first red rectangle locates between y=0 and y=30, and offset by 30
Your second red rectangle locates between y=60 and y=90
⋮
Now you see the problem, then don't match.
To solve it, you could change the offsets in test:
struct test : View {
⋮
Rectangle()
.offset(y: CGFloat((height - 1) * i))
⋮
}