[Chapter 6] Background image move when keyboard showup

📚 Official Books SwiftUI by Tutorials
1

Hi everyone.
In chapter 6 of this book.
When keyboard show up the background image move to the right like this
Before keyboard show up Screen Shot 2021-10-18 at 08.45.28

After Screen Shot 2021-10-18 at 08.45.38

Same with real device and simulator

2

Does anyone else have the same issue like me?

1 Like
3

hi Tri! yes, the same thing happens when I run it. I’m using Xcode 13.1. I’ve told Antonio.

I think it’s something subtle about the keyboard, possibly an Xcode/iOS bug.

1 Like
4

It looks like it’s not a SwiftUI or Xcode bug.

When the keyboard is shown, the view is resized, this causes a change in the background and image position.
I am trying to figure out how to avoid this.

A quick workaround is to use a geometry reader, by changing the body of WelcomeMessageView from

    Image("welcome-background")
      .resizable()
      .aspectRatio(1 / 1, contentMode: .fill)
      .edgesIgnoringSafeArea(.all)
      .saturation(0.5)
      .blur(radius: 5)
      .opacity(0.08)

to:

    GeometryReader { geometry in
      Image("welcome-background")
        .resizable()
        .aspectRatio(1 / 1, contentMode: .fill)
        .frame(width: geometry.size.width, alignment: .center)
        .edgesIgnoringSafeArea(.all)
        .saturation(0.5)
        .blur(radius: 5)
        .opacity(0.08)
    }

Thanks @Audrey for pinging me, and @tringuyen623 for pointing this out — I often (maybe too much) don’t use the soft keyboard, so this passed unnoticed.

1 Like
5

I get a similar behaviour to tringuyen623. In the project files if you are following along with the book, there is no Image("welcome-background) in the WelcomeMessageView as it was refactored to become a Label. Adding the GeometryReader & .frame(width: geometry.size.width, alignment: .center) modifier to the Image now located in the WelcomeBackgroundImage does correct the background movement for me.

Just an FYI for others.