嵌套CSS Grid布局仅input type="date"时渲染正常问题排查

问题描述 #

• 编写的简易密码重置表单，在Ubuntu端Firefox、Chrome浏览器，以及MacOS端Firefox浏览器中均未按预期渲染，仅同设备的MacOS Safari浏览器可正常显示
• 测试发现特殊现象：将表单内<input type="***">的类型修改为<input type="date">时，Grid行布局即可按预期渲染；目前测试text/email/password/number类型的input均会触发异常渲染，其余input类型暂未测试
• 核心疑问：<input type="date">是否存在特殊渲染逻辑，使其可以正常适配Grid布局？

原始复现代码 #

CSS部分 #

form {
  border-radius: 15px;
  margin-top: 15px;
  display: grid;
  justify-self: center;
}

body {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

.main-body {
  display: grid;
  grid-template-columns: 1fr;
}

.input-row,
.stores-input-input-row {
  margin: 0px;
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
}

.input-row label {
  text-align: right;
}

.input-block,
.stores-input-input-row {
  padding: 0px;
  margin: 5px;
  border-radius: 5px;
}

HTML部分 #

<div class="main-body">
  <h3>Reset Password</h3>
  <form action="./password-reset" method="post">
    <div class="input-block">
      <div class="input-row">
        <label for="username">Username:</label>
        <input type="text" name="username">
      </div>
      <div class="input-row">
        <label for="current_password">Current Password:</label>
        <input type="password" name="current_password">
      </div>
      <div class="input-row">
        <label for="new_password">New Password:</label>
        <input type="password" name="new_password">
      </div>
      <div class="input-row">
        <label for="confirm_new_password">Confirm New Password:</label>
        <input type="password" name="confirm_new_password">
      </div>
    </div>
    <input type="submit" name="submit">
  </form>
</div>

渲染效果对比 #

• 原始代码异常渲染效果：
  
• 所有input修改为date类型后的预期渲染效果：
  

问题原因 #

<input type="date">没有特殊的Grid适配逻辑，出现这个现象的核心原因是Grid布局的默认规则和不同类型input的固有尺寸计算差异：

1. 按照W3C标准，Grid网格项的默认min-width属性值为auto，即网格项的宽度不能小于其内容的最小固有宽度，否则会自动撑开网格列，打破预设的列宽比例
2. 对于text/password/email/number这类常规文本输入框，浏览器默认根据其size属性（默认值为20）计算最小固有宽度，算上默认内边距、边框后总宽度约130px-160px，两列input+label的最小宽度总和超过了当前Grid容器分配的可用宽度，直接撑破了预设的0.5fr 0.5fr列布局
3. date类型输入框的最小固有宽度计算逻辑和文本输入框不同，默认最小宽度更小，刚好没有触发网格项的最小宽度撑出规则，所以看起来渲染正常
4. Safari浏览器表现正常是因为部分版本的Safari没有完全对齐Grid标准，没有实现网格项默认min-width: auto的规则，不会被内容最小宽度撑破布局。

修复方案 #

只需要重置网格项的最小宽度约束，让输入框可以适配网格列的宽度即可，添加如下CSS代码：

.input-row input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

添加后所有类型的input都会按照预设的Grid列宽正常渲染，不会再出现布局错乱。

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