Labels jumping during the floating animation on <ui-textbox>

[Akiyamka]

When one of the elements plays the floating animation all other elements "jumping". Looks like this: Note that the label becomes a little blurry. This behavior is observed not everywhere, sometimes it displays perfectly. But I couldn't find any regularity.

[nivv]

This shows most of the time if you put a TextBox inside an animated UiModal (scale animation)

[Akiyamka]

if you put a TextBox inside an animated UiModal

Possible, but I didn't put the TextBox inside an animated UiModal. DOM looks like this:

<div class="profile">
      <h2> {{userInfo.name}} </h2>
      <section class="user-info">

                <ui-textbox
                floating-label
                label="User Name"
                name="name"
                placeholder="Enter user name"
                v-model="userInfo.name"
                required=true
                ></ui-textbox>

                <ui-textbox
                 floating-label
                 label="Password"
                 name="password"
                 placeholder="Password"
                 v-model="userInfo.password"
                 type = "password"
                 required=true
                 ></ui-textbox>
  
                   <!-- many another ui-textbox -->
       </section>
</div>

[kilobyte2007]

For textboxes I use the following workaround:

.ui-textbox__label {
    ...
    border-bottom: 1px solid transparent;
}
.is-active .ui-textbox__label {
    ...
    border-color: $color;
}

.ui-textbox.is-active:not(.is-disabled) .ui-textbox__input, .ui-textbox.is-active:not(.is-disabled) .ui-textbox__textarea {
    ...
    border-bottom-width: 1px;
}

[kilobyte2007]

@JosephusPaye If you consider it a good solution I can make a fix and create a PR (for textboxes and select).