Group Group Group Group Group Group Group Group Group

[Chapter 6] Background image move when keyboard showup

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

After

Same with real device and simulator

Does anyone else have the same issue like me?

1 Like

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

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