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

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>

更新

使用您的初始代码，如果您更改 minmax(1px,1fr)只有 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