为什么Chrome 80会导致此grid-template-rows:auto问题 [英] Why does Chrome 80 cause this grid-template-rows: auto problem

问题描述

有人知道最新的Chrome 80更新有什么吗?

Is anyone aware what is up with the latest Chrome 80 update?

好像

grid-template-rows: auto

从现在开始就开始占用一些空间，即使标记中没有给定的行也是如此.仅在Chrome 80+上发生.

started taking up some space from now even when a given row is not present in the markup. Happens on Chrome 80+ only.

.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

Firefox 72

推荐答案

我不确定这是否是bug或CSS网格算法是否有所更改(需要修改Spec)，但是您可以像下面这样简化逻辑:

I am not sure if it's a bug or something has changed in the CSS grid algorithm (need to revise the Spec) but you can simplify your logic like below:

.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)，它应该可以正常工作.

With your initial code, if you change minmax(1px,1fr) with only 1fr it should work fine.

.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()如何使行变大.

It seems that the new version of chrome is resolving the minmax(1px,1fr) differently. You can try to increase the value of 1px slowly and notice how the minmax() will make the row bigger.

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

存在类似问题的相关问题: Chrome 80中的grid-template-columns计算不一致

Related question having a similar issue: grid-template-columns in Chrome 80 inconsistently computed

这篇关于为什么Chrome 80会导致此grid-template-rows:auto问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！