Expected behavior

I am attempting to implement an 'edit' form where the form fields are not empty when the user loads the page.

I expected that the floating labels would start in the 'floated' position and not animate into that position on page load.

Actual behavior

Each time the user loads the form all the labels animate up into the 'floated' position, which looks strange.

Resources (screenshots, code snippets etc.)

I have implemented the inputs as per examples:

 <div class="form-outline" data-mdb-input-init>
      <input type="text" class="form-control" id="name" value="Mark" />
      <label for="name" class="form-label">Name</label>
</div>

You can see the behaviour I am talking about in this example from the documentation

https://mdbootstrap.com/docs/standard/forms/validation

In the 'Basic Example' the 'First Name' and 'Last Name' fields are populated as for an edit form. Every time you refresh the page their labels animate into position.

Is there any way to avoid this, or should I avoid floating labels for edit forms? :(