SwiftUI removing a space on the view

on may SwiftUI view i'm try to display a simple TOP blue bar, a red rectangle and a lower bar, as you can see from the attached picture there is a strange white space from the topper and red rectangle on the top part that I want to remove but I don't understand why is there.

here is the simple code:

    var body: some View {

        GeometryReader { geometry in
            VStack {
                //upper top bar
                HStack{
                    Text("TOP BAR")

                }.frame(width: geometry.size.width, height: geometry.size.height/10)
                    .background(LinearGradient(gradient: Gradient(colors: [Color("BlueW"), Color("DARK")]), startPoint: .topLeading, endPoint: .bottomTrailing).shadow(radius: 2)).edgesIgnoringSafeArea(.all)

// <<<<<<<<<<<<<<<<<<< PROBLEM HERE <<<<<<<<<<<<<<<<<<
                // testing rectangle
                Rectangle().foregroundColor(.red)

                //lower bar
                ZStack {

                    HStack {
                        Image(systemName: "house")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .padding(20)
                            .frame(width: geometry.size.width/3, height: 75)
                            .foregroundColor(self.viewRouter.currentView == "home" ? .black : .gray)
                            .onTapGesture {
                                self.viewRouter.currentView = "home"
                        }
                        ZStack {
                            Circle()
                                .foregroundColor(Color.white)
                                .frame(width: 75, height: 75)
                            Button(action: {
                                self.isAddPresented = true
                            }) {
                                Image(systemName: "plus.circle.fill")
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .frame(width: 75, height: 75)
                                    .foregroundColor(.green)
                                    .rotationEffect(Angle(degrees: self.showPopUp ? 90 : 0))
                            }
                            .sheet(isPresented: self.$isAddPresented) {
                                AirportView(dm: self.dm, airport: self.general.airportData, dismissFlag: self.$isAddPresented)

                            }
                        }

                        .offset(y: -geometry.size.height/10/2)
                        .onTapGesture {
                            withAnimation {
                                self.showPopUp.toggle()
                            }

                        }
                        Image(systemName: "paperplane.fill")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .padding(20)
                            .frame(width: geometry.size.width/3, height: 75)
                            .foregroundColor(self.viewRouter.currentView == "routekit" ? .black : .gray)
                            .onTapGesture {
                                self.viewRouter.currentView = "routekit"
                        }

                    }.frame(width: geometry.size.width, height: geometry.size.height/10)
                        .background(LinearGradient(gradient: Gradient(colors: [Color("BlueW"), Color("DARK")]), startPoint: .topLeading, endPoint: .bottomTrailing).shadow(radius: 2))
                }
            }

        }.edgesIgnoringSafeArea(.bottom)
    }

The problem lies within the HStack having its edges ignoring all safe area (.edgesIgnoringSafeArea(.all)).

As you can see, if you inspect your view, your green view (HStack) is actually inside the GeometryReader, but its frame goes outside.

Solution: remove .edgesIgnoringSafeArea(.all).

New problem though, there would be a white space at the top safe area.

Solution:

Set GeometryReader to .edgesIgnoringSafeArea([.top, .bottom])

Voila!