Floating labels not working in Parcel example

[nkdas91]

In Parcel example, Floating labels work only when I remove the following code from examples/parcel/node_modules/bootstrap/scss/forms/_floating-labels.scss

// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
  ~ label {
    opacity: $form-floating-label-opacity;
    transform: $form-floating-label-transform;
  }
}

Steps to reproduce the issue:

1. In examples/parcel/src/scss/styles.scss, uncomment @import "bootstrap/scss/forms";
2. Add floating labels example to examples/parcel/src/index.html

<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>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

3. npm install
4. npm start (the label won't float when focused)
5. Remove/Comment the above SCSS and it works

---

Not working on: Chrome 108.0.5359.71 (This version is outdated) on Ubuntu 16.04

Works on:
Firefox on Ubuntu 16.04 and Chrome 112 on Windows 11