ZStack background ignoring protected space whereas content material respects it, all scrolling collectively in ScrollView

I am making an attempt to create a ScrollView with content material on the high that has the next necessities:

• The content material (1. VStack) needs to be in a ZStack with a background colour (or picture)

• The background ought to prolong edge-to-edge (ignore protected space)

• The content material itself ought to respect the protected space

• All the ZStack (background + content material) and the remainder of the ScrollView (e.g. the two. VStack) ought to scroll along with the ScrollView content material

The Drawback:

As you possibly can see within the picture, the background extends past the Secure Space as supposed. Nonetheless, the content material (1st VStack) is positioned behind the notch. However the content material needs to be aligned usually and stay totally seen.

I can not work out learn how to obtain this structure. Merely including a background behind the ScrollView would not work as a result of I would like the background to scroll with the content material, not stay mounted.

Within the connected image, you possibly can see that the VStack ought to respect the protected space, however the background ought to prolong beneath it.

What I’ve Tried:

I’ve tried totally different approaches and I am sharing one in every of them under, however none of my makes an attempt have labored to this point.

struct DemoView: View {
    var physique: some View {
        ScrollView {
            ZStack {
                Shade.blue
                // 1. VStack
                VStack {
                    Textual content("1. Good day World")
                    Textual content("2. Good day World")
                    Textual content("3. Good day World")
                    Textual content("4. Good day World")
                    Textual content("5. Good day World")
                }
                .safeAreaPadding()
            }
            
            // 2. VStack
            VStack {
                Textual content("1. Extra textual content")
                Textual content("2. Extra textual content")
                Textual content("3. Extra textual content")
                Textual content("4. Extra textual content")
                Textual content("5. Extra textual content")
            }
        }
        .ignoresSafeArea()
    }
}

#Preview {
    DemoView()
}

I might be glad about any options on learn how to clear up this.