Windows版Chrome 129同时使用CSS Sub Grid和Container Queries崩溃

问题原因 #

这是Chrome 129稳定版存在的已知布局引擎bug：当元素同时作为子网格容器（display: grid + grid-template-rows: subgrid）和容器查询容器（container-type: inline-size）时，浏览器在计算两者的布局交互逻辑时触发内存访问异常，直接导致STATUS_BREAKPOINT崩溃。

复现代码 #

CSS代码 #

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

.comparison-item {
  container-type: inline-size;
  display: grid;
  grid-template-rows: subgrid;
}

button {
  @container (min-width: 460px) {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
  }
}

HTML代码 #

<div class="comparison-grid">
  <div class="comparison-item ">
    <p>Item number 1</p>
    <button>test</button>
  </div>
  <div class="comparison-item">
    <p>Item number 2</p>
    <button>test</button>
  </div>
</div>

解决方案 #

提供三种可行的修复/规避方式：

• 降级浏览器版本：回退到Chrome 128或更早的稳定版本，该bug在旧版本中未触发。
• 临时规避联用逻辑：
  • 如果子网格不是必须的，将grid-template-rows: subgrid替换为明确的行高定义，比如grid-template-rows: auto auto；
  • 如果必须保留子网格，暂时移除container-type: inline-size，改用媒体查询（@media (min-width: 460px)）替代容器查询的逻辑。
• 等待官方修复：Chrome团队已收到相关bug反馈，后续稳定版会推送修复补丁，可关注Chrome更新日志。

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