SwiftUI doesn't update view on rotation

I followed the tutorial to implement the War Card Game in SwiftUI. It looks great as long as I’m in portrait mode. If I turn the simulator to landscape mode, the view doesn’t recalculate and everything becomes cut off.

Is this expected behavior?

I would have expected SwiftUI to automatically updates the view. After all it tries to be reactive, so why wouldn’t it recalculate the view upon rotation… How can I fix this?

My ContentView.swift for reference. Btw. the whole model logic is outsourced to another file using the ObjectObserver pattern which Chris explained in one of the other videos. But this shouldn’t affect the view anyways.

//
//  ContentView.swift
//  WarCardGameSwiftUI
//

import SwiftUI

struct ContentView: View {
    
    @EnvironmentObject var model: CardModel
    
    var body: some View {
        
        ZStack {
            
            Image("background")
                .resizable()
                .edgesIgnoringSafeArea(.all)
                .scaledToFill()
            
            VStack {
                
                Spacer()
                
                Image("logo")
                
                Spacer()
                
                HStack() {
                    
                    Image(model.cardName1).shadow(color: model.scorePlayerColor, radius: 15, x: 0, y: 0)
                    
                    Spacer()
                    
                    Image(model.cardName2).shadow(color: model.scoreCPUColor, radius: 15, x: 0, y: 0)
                    
                }
                
                Spacer()
                
                Button(action: model.dealTapped) {
                    
                    Image("dealbutton").renderingMode(.original)
                }
                
                Spacer()
                
                HStack {
                    
                    VStack(alignment: .leading) {
                        
                        Text("Player")
                        Text(String(model.scorePlayer)).font(.largeTitle)
                    }
                    
                    Spacer()
                    
                    VStack(alignment: .trailing) {
                        
                        Text("CPU")
                        Text(String(model.scoreCPU)).font(.largeTitle)
                    }
                    
                }.foregroundColor(.white)
                
                Spacer()
                
            }.padding(.all)
            
        }
        
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Ok, I found out the problem is the image.

Image("background")
                .resizable()
                .edgesIgnoringSafeArea(.all)
                .scaledToFill()

If I delete the modifiers on it, the view resizes properly when rotating. However deleting them is no option, since then the background is wrong.

This is weird, since the modifiers should apply only to the image and not to the HStack anyways. Why would the modifiers influence the HStack…?

Found the problem. The ZStack doesn’t treat its layers independently. It adapts to the biggest layer, in this case the image.

Instead the Background should be put in its own separate View and added to the VStack using the background() modifier.

So the use of a ZStack for a background like demonstrated by Chris in the video is not correct. It will break your layout if the Image is any bigger than the VStack, which as a background you would probably want. Instead use a separate BackgroundView and add it to the VStack using the background() modifier.