Next.js+Tailwind v3下select下拉错位、文字显示异常问题

问题现象 #

项目中所有select元素均存在显示异常：桌面端常规状态下渲染正常，打开谷歌Chrome开发者工具后点击select框唤出下拉选项时，会出现下拉选项位置偏移、文字几乎不可见的问题，异常效果如下图所示：

上述截图拍摄于Chrome浏览器的隔离模式下。
项目中任意位置添加的select元素点击后都会复现该问题，与元素绑定的class样式无关，同页面添加无任何额外样式的原生select测试元素，依然出现相同的显示异常。

项目技术栈 #

• Next.js 12.1.0
• React 18
• Tailwind CSS v3
• Tailwind采用默认配置，仅额外引入tailwind elements

复现代码 #

业务中使用的select代码：

<select 
  value={selectedValue} 
  data-e2e={attributeName} 
  onChange={(event) => onChangeAttribute(event)} 
  className="p-[9px] shadow placeholder:text-textgrey rounded border border-midgrey w-5/6"
>
  {
    attributeValues.map((attribute, index) => {
      return (
        <option
          className="font-roboto"
          key={`${attribute.label}-${index}`}
          value={attribute.value}
          data-e2e={attribute.value}
        >
          {attribute.lable}
        </option>
      );
    })
  }
</select>

无额外样式的测试select代码，同样会复现问题：

<select>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

排查与解决方案 #

这个问题本质是Chrome打开开发者工具时，原生select下拉弹出层的合成层位置计算bug，触发条件是select的任意上层祖先元素设置了会生成独立合成层的CSS属性，按以下步骤排查即可：

1. 打开DevTools的Elements面板，选中出问题的select元素，在右侧Computed面板逐层向上遍历所有祖先节点，搜索以下属性：
   • transform
   • filter
   • backdrop-filter
   • will-change
   • perspective
   • contain（值包含paint或layout时）
     只要任意一个属性值不为none，就会触发该bug。找到对应属性后临时取消赋值，验证问题是否消失，后续调整该属性的作用范围即可，不要把这类属性加到html、body这类全局根节点或者通用布局容器上。
2. 临时注释掉tailwind-elements的引入代码验证：部分旧版本tailwind-elements会给全局容器注入硬件加速相关的CSS属性，刚好命中Chrome的渲染bug，如果是这个原因，升级tailwind-elements到最新版即可解决。
3. 检查Chrome版本：118~123区间的Chrome版本存在多个原生表单控件的渲染缺陷，升级Chrome到最新稳定版，或者关闭Chrome设置中的「使用硬件加速模式」后重启浏览器，也能解决该问题。
   如果暂时定位不到具体触发属性，可以给全局select添加一条CSS规则绕开渲染bug：

select {
  transform: translateZ(0);
}

内容的提问来源于stack exchange，提问作者Nicolae Maties