Android Chrome input Shadow DOM高度不匹配及emoji粘贴抖动问题求助

Android Chrome的text类型input会在Shadow DOM中创建文本容器，默认情况下这个容器的高度会基于字体的默认行高计算，而非你设置的line-height值——这就是你设置21px行高后容器仍显示17.7px，且粘贴emoji时因容器高度突变引发抖动的原因。以下是几种可行的解决方法：

方案1：通过内边距固定内容区域高度 #

利用上下内边距挤压出固定高度的文本显示区域，强制Shadow DOM容器适配你设置的行高：

input[type="text"] {
  height: 52px;
  font-size: 15px;
  line-height: 21px;
  /* 计算上下内边距：(总高度 - 行高) / 2，左右内边距按需调整 */
  padding: calc((52px - 21px) / 2) 10px;
  box-sizing: border-box;
  /* 重置浏览器默认样式，消除干扰 */
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
}

这种方式通过内边距控制文本区域的可用空间，让Shadow DOM容器自然适配21px的行高，避免emoji粘贴时的高度波动。

方案2：直接覆盖Shadow DOM文本容器样式 #

针对Chrome特有的Shadow DOM元素，强制设置高度和行高：

input[type="text"] {
  height: 52px;
  font-size: 15px;
  line-height: 21px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

/* 定位Chrome移动端input内部的文本容器Shadow DOM元素 */
input[type="text"]::-webkit-input-text {
  line-height: 21px !important;
  height: 21px !important;
  vertical-align: middle;
}

注意：::-webkit-input-text是WebKit内核专属伪元素，需要用!important强制覆盖浏览器默认样式，确保生效。

方案3：Flex容器兜底方案 #

如果前两种方法无效，用flex容器包裹input，通过布局强制内容稳定：

.input-wrapper {
  display: flex;
  align-items: center;
  height: 52px;
}

.input-wrapper input[type="text"] {
  flex: 1;
  font-size: 15px;
  line-height: 21px;
  padding: 0 10px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

flex布局的align-items: center会强制input内容垂直居中，从根源上避免Shadow DOM容器的高度变化。

测试建议 #

• 在Android Chrome中直接测试粘贴emoji，观察抖动是否消失
• 若仍有问题，可将input的font-family设置为系统默认字体（如font-family: sans-serif），避免特殊字体导致的行高计算偏差

内容的提问来源于stack exchange，提问作者Ayaz Alavi