I'm working on Chapter 17 'Flashzilla'

The problem is that the Edit card button appears almost entirely off the right-hand edge of the screen on both 1st and 2nd gen iPhone SE simulators, but is correctly positioned on iPhone 11 Pro Max.

The code is as follows:

            VStack {

                HStack {

                    Spacer()

                    Button(action: {
                        showingEditScreen = true
                    }) {
                        Image(systemName: "plus.circle")
                            .padding()
                            .background(Color.black.opacity(0.7))
                            .clipShape(Circle())
                    }
                }

                Spacer()
            }
            .foregroundColor(.white)
            .font(.largeTitle)
            .padding()

If I try this code as the entire ContentView then it works fine on every single simulator I tried but if I put it into the project code it misbehaves. I thought I'd probably typed it wrongly so I loaded up Paul's Project 17 and ran it - it behaves exactly the same, namely the button is 90% off the right of the screen on both SE simulators but fine on iPhone 11 Max Pro.

I've stared at the code for a while but can't see anything wrong - is this something to report to Apple?

BTW, Paul's project builds for iOS 13, mine for iOS 14. I'm running iOS 14 in the simulators in Xcode 12 B 6 running on macOS 10.15.6

The code above is one part of a Zstack{} ; the first View in the ZStack is an Image("background") which has a .scaledToFill() modifier applied. The pixel dimensions of the "background" image are larger than the iPhone SE (2nd gen - and 1st!).

If I change it to .scaledToFit() then I end up with white bars at the top and bottom but the button appears correctly.

If I remove the .scaledToFill() modifier then the missing Edit Card button appears as it should and the background image looks fine too. It is an abstract image so haven't tried it with something "real".

My theory is that it seems as though the Edit Button is being drawn on top of the Image() and then that composited image is being .scaledToFill() which then pushes it almost off the edge of the screen. This doesn't happen on the iPhone 11 Pro Max as the screen can accommodate the image anyway.

I don't know enough about SwiftUI to know if this is a bug in the original code or a bug in SwiftUI but whatever it is, it's not right but I think I can fix it now! :-)