Web label aligment for material design bug on safari. The input is overlapping the label on first load

Blockquote

Hi i have a an issue on web in material design where input value is overllapping in the label on first load for safari browser they said they fix it on material 3. but material is still ongoing. is there anyway to fixed thisProblem image

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://unpkg.com/material- 
   components-web@6.0.0/dist/material-components-web.min.css">
  </head>
   <body>

  <div>
     <label class="mdc-text-field mdc-text-field--filled">
      <input type="text" class="mdc-text-field__input" aria- 
 labelledby="my-label">
   <span class="mdc-floating-label" id="my-label">Label</span>
   <div class="mdc-line-ripple"></div>
 </label>
   </div>

 <script src="https://unpkg.com/material-components- 
   web@v6.0.0/dist/material-components-web.min.js"></script>
   <script>
 const textField = new 
  mdc.textField.MDCTextField(document.querySelector('.mdc-text- 
  field'));
   const helperText = new mdc.textField.MDCTextFieldHelperText(document.querySelector('.mdc- 
  text-field-helper-text'));
 </script>
  </body>
 </html>