Hello everyone, My name is Keita Tomizu. I'm a university student in Japan, currently developing a personal app. I am facing a tricky SwiftUI layout issue that I have spent hours trying to solve, and I would really appreciate your insights. Context & Goal: I have an overlay UI layer (zIndex(4)) consisting of a VStack that contains top and bottom HStacks. • In the top-left, there is a back button (<). • In the top-right and bottom-right, there are action buttons. • When a user taps the bottom-right button, a state isShowingAddView becomes true. This brings up a keyboard and a custom view in the background. • My Goal: When isShowingAddView is true, the right-side buttons should scale up and fade out (opacity to 0) in place. The top-left < button should remain completely static and anchored in its exact position. The Issue: When the state toggles, the < button unexpectedly shifts horizontally (along the X-axis) and sometimes behaves erratically, moving off-screen or losing its static position. Also, the animations on the other buttons sometimes break or cancel abruptly. What I've tried: 1. I stopped using if !isShowingAddView to remove views, as I learned it causes the Spacer() to instantly expand and push the < button away. I am now using .opacity, .scaleEffect, and .allowsHitTesting instead. 2. I added .ignoresSafeArea(.keyboard) to the parent VStack to prevent the keyboard from pushing the UI up. Despite these changes, the < button still shifts horizontally during the state transition. Code Snippet: Here is the simplified structure of my overlay layer. (I have omitted the background layers for simplicity). Code: import SwiftUI struct ContentView: View { @State private var isShowingAddView: Bool = false var body: some View { ZStack { // Background layers and other views are here... // Overlay UI Layer VStack { HStack(alignment: .center) { // 1. The Back Button (<) - I want this to stay COMPLETELY fixed. Button(action: { if isShowingAddView { withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) { isShowingAddView = false } } }) { Image(systemName: "chevron.left") .font(.system(size: 21, weight: .semibold)) .foregroundColor(.black) .frame(width: 44, height: 44) } .background(Color.white.opacity(0.5)) // Simplified glass effect .clipShape(Circle()) Spacer() // The spacer that might be causing the X-axis shift? // 2. The Right Buttons - These fade out and scale up. HStack(spacing: 0) { Image(systemName: "circle.hexagongrid.fill").frame(width: 44, height: 44) Spacer().frame(width: 13) Image(systemName: "magnifyingglass").frame(width: 44, height: 44) Spacer().frame(width: 10) Image(systemName: "ellipsis").frame(width: 44, height: 44) } .foregroundColor(.black) .padding(.horizontal, 2) .frame(height: 44) .background(Color.white.opacity(0.5)) .clipShape(Capsule()) // Animation modifiers .scaleEffect(isShowingAddView ? 1.15 : 1.0) .opacity(isShowingAddView ? 0.0 : 1.0) .allowsHitTesting(!isShowingAddView) .animation(.spring(response: 0.45, dampingFraction: 0.8), value: isShowingAddView) } .padding(.horizontal, 16) Spacer() // 3. The Bottom Right Button (Plus) HStack { Spacer() Button(action: { withAnimation(.spring(response: 0.45, dampingFraction: 0.8)) { isShowingAddView = true } }) { Image(systemName: "plus") .font(.system(size: 23, weight: .regular)) .foregroundColor(.black) .frame(width: 48, height: 48) } .background(Color.white.opacity(0.5)) .clipShape(Circle()) // Animation modifiers .scaleEffect(isShowingAddView ? 1.15 : 1.0) .opacity(isShowingAddView ? 0.0 : 1.0) .allowsHitTesting(!isShowingAddView) .animation(.spring(response: 0.45, dampingFraction: 0.8), value: isShowingAddView) } .padding(.horizontal, 28) .padding(.bottom, 16) } .zIndex(4) .ignoresSafeArea(.keyboard) } } } My Question: How can I completely anchor the < button so it is immune to layout shifts when its sibling views animate (scale/opacity) and when the keyboard appears? Is there a better layout strategy or a concept I am missing to isolate this button's position? Any advice, concepts, or solutions would be deeply appreciated. Thank you!