That is due to scaledToFill(). If you apply this to the grey Rectangle, the rectangle is first resized to its preferrred measurement, which occurs to be a 10x10pt sq.. That is then scaled to fill the out there area.
When the window’s width is larger than its top, the grey “sq.” will probably be scaled to exceed the window’s top. Strive including .border(.pink) to the ZStack – you’ll solely see the pink borders on the 2 sides, however not the highest and backside borders. Which means that the origin of the ZStack is exterior of the window, because the ZStack will resize itself to suit each view in it.
Here’s a moderately exaggerated diagram of what’s occurring:
The blue rectangle is the window, the pink sq. is the Rectangle that’s scaledToFill, and the dotted line outlines the blue Rectangle that has apparently “moved upwards”.
Equally, when the window’s top is larger than its width, the sq. will probably be scaled to exceed the window’s width. .border(.pink) will now solely present the highest and backside borders, however not the border on the perimeters.
You’ll be able to set a special preferrred measurement by, e.g. .body(idealWidth: 100, idealHeight: 50), earlier than scaledToFill. Now you may see that it’s scaling a 100x50pt rectangle, and it solely “works appropriately” when the body of the window has a W:H ratio of two:1.
In case you simply desire a rectangle that covers the entire window, you do not want scaledToFill() in any respect. Rectangles (all built-in Forms in actual fact) will attempt to take up as a lot out there area as attainable.