Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Issue:
On some devices, such as the Google Pixel 8 running the latest Chrome, Bootstrap’s floating label inputs do not scroll into view when the touch keyboard opens, even when the input is hidden underneath the keyboard.

I've also had reports of the same issue on iPhone 12 pro/Safari/iOS 18.5, although I am unable to recreate.

Expected behaviour:
When a user taps on an input field, the mobile browser should scroll the input into view so it is not obscured by the on-screen keyboard. This is standard behaviour on both Android and iOS for native and web inputs.

Observed behaviour:
When using Bootstrap’s .form-floating markup, the input remains hidden behind the keyboard on certain devices (like Pixel 8 with Chrome), and the page does not scroll to reveal the focused input. This occurs even on the official Bootstrap docs example page: https://getbootstrap.com/docs/5.0/forms/floating-labels/

Example markup from that page:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

Reproduction steps:

1. Open the following link on a Pixel 8 in Chrome: https://getbootstrap.com/docs/5.0/forms/floating-labels/
2. Scroll down so the input is near the bottom of the screen
3. Tap the input
4. The keyboard opens, but the input is not scrolled into view. This behaviour can be intermittent.
5. Typing a character then causes it to scroll into view (delayed reflow)

Possible cause:
It may be related to the internal use of position: absolute, transform, and transition effects inside .form-floating, which may affect how Chrome calculates whether the input is already visible.

Environment:
Device: Pixel 8
OS: Android 14
Browser: Chrome 114+
Bootstrap Version: 5.0

Reduced test cases

You can recreate the issue using a Google Pixel 8 running Chrome at: https://getbootstrap.com/docs/5.0/forms/floating-labels/

What operating system(s) are you seeing the problem on?

Windows, Android

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.0