Unexpected Frame Resizing Behavior During Animation of safeAreaInset content.

Hey everyone! I’m encountering an issue while attempting to animate height changes of the content inside safeAreaInset(edge:alignment:spacing:content:).

When animating a reduction in the frame height, the container view (in my case, Map) also animates unexpectedly. However, when animating an increase in the frame height, the animation works smoothly, and the Map view remains still.

How can I address this odd resizing behavior of the container?

Code:

struct MapView: View {

    var body: some View {
        Map()
            .safeAreaInset(edge: .bottom) {
                MapDetailView()
            }
    }
}

struct MapDetailView: View {

    @State private var oldHeightOffset: CGFloat = 0
    @State private var newHeightOffset: CGFloat = 0
    @State private var containerHeight: CGFloat = 0

    private var drag: some Gesture {
        DragGesture(coordinateSpace: .global)
            .onChanged { value in
                withAnimation(.interactiveSpring) {
                    newHeightOffset = oldHeightOffset + value.translation.height
                }
            }
            .onEnded { value in
                switch newHeightOffset {
                case containerHeight * 0.625...containerHeight:
                    withAnimation(.spring) {
                        newHeightOffset = containerHeight * 0.75
                    }
                case containerHeight * 0.25..<containerHeight * 0.625:
                    withAnimation(.spring) {
                        newHeightOffset = containerHeight * 0.5
                    }
                case 0..<containerHeight * 0.25:
                    withAnimation(.spring) {
                        newHeightOffset = 0
                    }
                default:
                    break
                }
                oldHeightOffset = newHeightOffset
            }
    }

    var body: some View {
        NavigationStack {
            Rectangle()
                .fill(.clear)
                .containerBackground(.ultraThinMaterial, for: .navigation)
        }
        .gesture(drag)
        .containerRelativeFrame(.vertical) { length, _ in
            length - newHeightOffset
        }
        .onGeometryChange(for: CGFloat.self) { geometryProxy in
            let frame = geometryProxy.frame(in: .local)
            return frame.height + newHeightOffset
        } action: { containerHeight in
            self.containerHeight = containerHeight
        }
    }
}

Reducing safe area inset's content height (drag down):

Increasing safe area inset's content height (drag up):