为什么 Chrome 80 会导致这个 grid-template-rows: auto 问题

Question

有人知道最新的 Chrome 80 更新有什么问题吗？

好像

grid-template-rows: auto

即使标记中不存在给定行，也从现在开始占用一些空间。仅在 Chrome 80+ 上发生。

.l-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto minmax(1px, 1fr);
  /*  // 1px is needed because of https://stackoverflow.com/questions/49558290/container-scrolls-to-top-when-children-element-height-changes */
  grid-template-areas:
    'sidebar primary_bar'
    'sidebar notification'
    'sidebar content';
  width: 100vw;
  height: 100vh;
}

.l-sidebar {
  grid-area: sidebar;
  padding-right: 10px;
}

.l-notification {
  grid-area: notification;
}

.l-primary-bar {
  grid-area: primary_bar;
}

.l-content {
  grid-area: content;
}

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <!--<div class="l-notification"></div>
      <div class="l-primary-bar"></div>-->
  <div class="l-content">content</div>
</div>

另请参阅：https://jsfiddle.net/ju4xvegf/

Chrome 80

火狐 72

Answer 1

我不确定这是错误还是 CSS 网格算法发生了变化（需要修改规范），但您可以简化逻辑，如下所示：

.l-page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 300px;
  margin:5px;
  border: 1px solid red;
}

.l-sidebar {
  grid-row: span 3;
  grid-column:-3;
  padding-right: 10px;
}

.l-primary-bar {
  order: 1;
}
.l-notification {
  order: 2;
}

.l-content {
  order: 3;
}

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-notification">notif</div>
  <div class="l-primary-bar">bar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-notification">notif</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-primary-bar">bar</div>
  <div class="l-notification">notif</div>
  <div class="l-sidebar">sidebar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-primary-bar">bar</div>
  <div class="l-notification">notif</div>
  <div class="l-content">content</div>
</div>

---

更新

使用您的初始代码，如果您只用1fr 更改minmax(1px,1fr)，它应该可以正常工作。

.l-page {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    'sidebar primary_bar'
    'sidebar notification'
    'sidebar content';
    height: 300px;
  margin:5px;
  border: 1px solid red;
}

.l-sidebar {
  grid-area: sidebar;
  padding-right: 10px;
}

.l-notification {
  grid-area: notification;
}

.l-primary-bar {
  grid-area: primary_bar;
}

.l-content {
  grid-area: content;
}

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-notification">notif</div>
  <div class="l-primary-bar">bar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-sidebar">sidebar</div>
  <div class="l-notification">notif</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-primary-bar">bar</div>
  <div class="l-notification">notif</div>
  <div class="l-sidebar">sidebar</div>
  <div class="l-content">content</div>
</div>

<div class="l-page">
  <div class="l-primary-bar">bar</div>
  <div class="l-notification">notif</div>
  <div class="l-content">content</div>
</div>

似乎新版本的 chrome 正在以不同的方式解析 minmax(1px,1fr)。您可以尝试慢慢增加1px 的值，并注意minmax() 如何使行变大。

注意1fr 等价于minmax(auto,1fr) https://github.com/w3c/csswg-drafts/issues/1777

有类似问题的相关问题：grid-template-columns in Chrome 80 inconsistently computed

Answer 2

注意：我在写这个答案时分心了，而且我有一段时间没有深入研究 CSS Grid，所以这只是我对正在发生的事情的最佳猜测。

我认为这也与您命名的 grid-template-areas 有关，而不仅仅是您的 grid-template-rows 设置。您的 CSS 中有以下命名区域：

grid-template-areas:
    'sidebar primary_bar'
    'sidebar notification'
    'sidebar content';

但在您的标记中，您有两个右列 div 被注释掉了：

<!--<div class="l-notification"></div>
    <div class="l-primary-bar"></div>-->

Firefox 和 v80 之前的 Chrome 似乎忽略了标记中为空或不存在的 grid-template-areas，因此您在顶部看到 content 与 sidebar 位于同一行。但是，Chrome v80 似乎已经决定，由于您已经通过 grid-template-areas 属性声明了多行，它应该至少保留一行空间，可能使用以下逻辑：

"将所有空行合并为一行，然后在网格中的下一个可用行上开始行"

而不是 Chrome 79（和 Firefox 72）所做的：

"完全折叠所有空行，以便只显示有内容的行。"

简而言之，您需要删除 grid-template-areas 属性中没有标记的命名区域之一。我会继续寻找。