SwiftUI: Why the background exceeds the frame?

Question

Let's have a look at this simple code:

GeometryReader { gr in
    Text("hi there!")
        .frame(width: 2 * gr.size.width / 3, height: gr.size.height)
        .background(.yellow)
        .border(.gray)
}

Why the background exceeds the frame? The border however works as expected:

Answer 1

By default, the background function ignores the "safe area" (which is good in many cases). To prevent this from happening, simply write:

.background(.gray, ignoresSafeAreaEdges: [])

More info at: https://developer.apple.com/documentation/swiftui/view/background(_:ignoressafeareaedges:)

Answer 2

For some reason, Color has changed to ignoring safe area/frame constraints and flows outside. The fix is to use a colored shape:

        GeometryReader { gr in
            Text("hi there!")
                .frame(width: 2 * gr.size.width / 3, height: gr.size.height)
                .background(
                    Rectangle()
                        .fill(Color.yellow)
                )
                .border(.gray)
        }