Chrome 122.0.6261.70及Chromium浏览器position fixed网格子元素是否存在Bug？

近期在Chrome 122.0.6261.70及其他Chromium内核浏览器（如Edge）中发现异常：当网格子元素设置position: fixed后，并未脱离grid容器的约束，仍受.grid-child的justify-self: center属性影响，无法占满窗口宽度。

按照CSS规范，设置position: fixed的元素应脱离正常文档流，网格子元素设置该属性后本应不再受grid容器的布局控制，这也是其他浏览器及旧版Chrome（122之前）的一致表现。

代码复现示例 #

CSS代码

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
p {
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  align-content: flex-end;
  height: 100svh;
  border: 3px solid gray;
  border-radius: 10px;
  overflow: hidden;
}

.grid-child {
  justify-self: center;
  padding: 15px;
  border-radius: 7px;
}

.info {
  background-color: lightgrey;
  max-height: 55svh;
  overflow: auto;
}
.fixed {
  background-color: lightskyblue;
  text-align: center;
}

.fixed:has(:checked) {
  position: fixed;
  inset: 0 0 auto;
}
.fixed p {
  max-width: 70svw;
  margin: 10px auto 0;
  text-align: center;
  text-wrap: balance;
}

HTML代码

<div class="grid">
  <label class="grid-child fixed">
    <input type=checkbox />
    <span>position: fixed</span>
    <p>I should occupy the whole width when the input is checked</p>
  </label>
  <div class="grid-child info">
    <p>Why Android Chrome Browsers (only) are being affected for the CSS property below, when the element position is set to fixed?</p>
    <pre>
.grid-child {
  justify-self: center
}</pre>
    <p>It shouldn't be affected for the grid constraints, since it is removed from the grid container once its position is set to fixed, and therefore it should take all the window width instead of being justified to the center</p>
  </div>
</div>

版本表现对比截图 #

桌面端

position: static

position: fixed - 正确表现（Chrome 122之前）	position: fixed - 异常表现（Chrome 122之后）

移动端

position: static

position: fixed - 正确表现（Chrome 122之前）	position: fixed - 异常表现（Chrome 122之后）

问题核心 #

设置position: fixed的网格子元素，未按预期脱离grid容器，仍受.grid-child的justify-self: center属性约束，无法占满窗口宽度。

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