Chrome与Edge关联datalist时日期/时间选择器显示过小问题

这是Chromium内核浏览器（Chrome、Edge均基于该内核）的已知渲染bug，具体原因如下：

• 当原生time类型输入框与datalist绑定后，浏览器在处理缩放比例≤100%的场景时，会错误计算时间选择器（time-picker）弹窗的布局尺寸，导致其渲染异常缩小。
• 该bug属于内核层面的渲染逻辑缺陷，和浏览器扩展、缓存无关（隐身模式测试已验证这一点），且仅在特定版本的Chromium内核中出现——你使用的Chrome 115.x属于较旧的稳定版，后续更新的内核版本已经修复了这个问题。
• 移除datalist后恢复正常，也进一步验证了bug触发的条件就是time输入框与datalist的组合渲染逻辑。

临时解决方案 #

• 优先升级Chrome/Edge到最新稳定版，新版本已修复此渲染问题。
• 若暂时无法升级，可临时移除datalist绑定，或使用自定义时间选择器组件替代原生time输入控件。

复现代码 #

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

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