Search code examples
iosionic-frameworkcapacitor

Opening keyboard in Ionic iOS app moves the background image up

When opening the keyboard in iOS the background image of my ion-content is moved up. How can I stop this? I am using Capacitor not Cordova.

enter image description here

enter image description here

<ion-content>
  <div class="content">

.content {
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  background: url("./../../../assets/img/login-bg.jpg") no-repeat fixed center;
  background-size: cover !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: left;
}

I have a solution for Android already in the AndroidManifest.xml:

<activity android:windowSoftInputMode="adjustPan" />
Solution

  • For iOS add this to capacitor.config.json

    {
  "plugins": {
    "Keyboard": {
      "resize": "body",
      "style": "dark"
    }
  }
}

    See documentation here: https://capacitor.ionicframework.com/docs/apis/keyboard

    For Android: Add this to AndroidManifest.xml:

    <activity android:windowSoftInputMode="adjustPan" />