.background modifier with contained shape causes view to expand to full vertical size of the screen

[foscomputerservices]

When a shape (say a RoundedRectangle()) is added to the background modifier, the view fills the entire vertical height of the screen.

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .background(RoundedRectangle(cornerRadius: 10.0).fill(Color.red))
    }
}

Expected behavior

On iOS the background modifier does not change the view size, so I expected the size to remain the size of Text.

Screenshots
Attached

Workaround

In this particular example, the following code can be used to work around the issue:

        Text("Hello, world!")
            .background(Color.red)
            .cornerRadius(10)

NOTE: This issue was previously described along with many other issues in issue #336. I wanted to provide a contrite example.

[carson-katri]

Just dumping this here until I have time to open a PR, but this CSS should be able to fix both background and overlay layouts:

.zstack {
  display: inline-grid;
  grid-template-columns: auto auto;
}

.foreground {
  grid-area: a;
}

.background {
  /* The interesting part */
  width: 0;
  min-width: 100%;
  height: 0;
  min-height: 100%;
  
  grid-area: a;
  overflow: hidden;
  
  background-color: red;
}

It wouldn't actually apply to ZStack, just the background and overlay layouts.