I’m encountering an issue in my Angular application where, upon clicking a textarea with id “message,” the soft keyboard appears as expected on mobile and tablet devices. However, when the soft keyboard appears, my background image is pushed upwards, causing an undesirable shift in the layout. How can I ensure that the background image stays in position while the soft keyboard appears on top of it?

HTML:

<main class="start-a-conversation-container with-background-start-a-conversation">
  <section class="start-a-conversation-text">
    <article class="start-a-conversation">
      <p class="text-effect">
      <h2 class="sub-header-start-a-conversation centered-text-start-a-conversation">
        Start a conversation</h2>
    </article>

    <article class="start-a-conversation-form-container">
      <section class="contact-form">
        <p class="intro-text">
          Open to collaborations and connections for exciting ventures. <br>
          Let's build something meaningful together – reach out today!</p>

        <form (ngSubmit)="submitForm()" #contactForm="ngForm">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" autocomplete="name"
                   [(ngModel)]="formData.name" required
                   (focus)="onFocus('name')"
                   (blur)="onBlur('name')">
          </div>

          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" autocomplete="email"
                   [(ngModel)]="formData.email" required
                   (focus)="onFocus('email')"
                   (blur)="onBlur('email')">
          </div>

          <div class="form-group-message">
            <label for="message">Message</label>
            <textarea id="message" name="message"
                      [(ngModel)]="formData.message" required
                      (focus)="onFocus('message')"
                      (blur)="onBlur('message')"
            ></textarea>
          </div>

          <button class="submit-button" type="submit" [disabled]="contactForm.invalid">Send Message</button>

          <div *ngIf="successMessage" class="success-message">
            <p>{{successMessage}}</p>
          </div>

          <div *ngIf="failureMessage" class="failure-message">
            <p>{{failureMessage}}</p>
          </div>

        </form>
      </section>
    </article>
  </section>
</main>

CSS:

.start-a-conversation-container.with-background-start-a-conversation {
  background: var(--black) url("src/assets/img/background-start-a-conversation.png") center center/cover no-repeat;
  height: 100vh;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
}

.with-background-start-a-conversation::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--black) url("src/assets/img/background-start-a-conversation.png") center center/cover no-repeat;
}

I attempted to address the issue by implementing various CSS approaches. Initially, I set the background image using the background property with position: fixed. This was supposed to keep the background fixed while allowing the soft keyboard to appear on top of it. However, when the soft keyboard appeared, the background image still shifted upwards.

To rectify this, I then tried setting the background image as a pseudo-element (::before) with position: fixed. This approach was expected to prevent the background from shifting when the soft keyboard appeared. Nevertheless, the issue persisted, and the background image continued to move upwards.

Subsequently, I implemented a TypeScript function to adjust the background size dynamically based on the content height. This function was triggered on resize events and initially on component initialization. Despite these efforts, the background image still shifted when the soft keyboard appeared on mobile and tablet devices.

Overall, none of these attempts successfully resolved the issue, and the background image continued to move upwards when the soft keyboard appeared.