Safari下Material Design输入框首次加载与标签重叠Bug修复

我在Web端使用Material Design开发时遇到问题：Safari浏览器环境下，页面首次加载时输入框内容会与浮动标签发生重叠。官方表示该问题已在Material 3中修复，但Material 3目前仍在迭代开发阶段，请问是否有可行的修复方案？
问题截图

问题复现代码 #

<!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>

问题根因 #

MDC v6版本的文本框组件初始化逻辑未兼容Safari特有渲染时序：Safari在页面首次加载、自动填充触发时，不会按标准顺序触发input事件，组件无法及时感知输入框已有值的状态，因此不会给标签添加上浮样式，最终出现内容与标签重叠的问题。

可行修复方案 #

• JS主动检测修复
  组件初始化完成后，手动校验所有文本框的值状态，同时监听Safari自动填充事件，强制触发标签上浮逻辑，直接在原有初始化代码后追加以下逻辑即可：

document.querySelectorAll('.mdc-text-field').forEach(field => {
  const input = field.querySelector('.mdc-text-field__input');
  if (!input) return;
  // 初始化时检测已有值
  if (input.value.trim() !== '') {
    field.classList.add('mdc-text-field--label-floating');
  }
  // 监听Safari自动填充事件
  input.addEventListener('animationstart', e => {
    if (e.animationName === 'onAutoFillStart') {
      field.classList.add('mdc-text-field--label-floating');
    }
  });
});

• CSS兜底修复
  不需要改动现有JS逻辑，追加Safari专属样式规则，利用伪类检测输入框状态强制标签上浮。使用该方案需要给所有.mdc-text-field__input添加空placeholder属性（例如placeholder=" "），保证:placeholder-shown伪类正常生效：

/* Safari 浏览器专属样式补丁 */
@supports (-webkit-touch-callout: none) {
  .mdc-text-field__input:not(:placeholder-shown) ~ .mdc-floating-label,
  .mdc-text-field__input:-webkit-autofill ~ .mdc-floating-label {
    transform: translateY(-106%) scale(0.75);
  }
}

• 低版本升级修复
  不需要全量迁移到迭代中的Material 3，只需要将material-components-web升级到v2分支的最终稳定版v14.x即可，该版本已经在原有v2架构下合入了Safari场景的重叠问题修复，API无破坏性变更，迁移成本最低。

内容的提问来源于stack exchange，提问作者Jonmari Dandal