Chrome 80 中的网格模板列计算不一致 [英] grid-template-columns in Chrome 80 inconsistently computed
问题描述
我有一个包含四个表单的页面.每个表单的布局都使用以下 CSS 网格配置定义，该配置在所有表单之间共享:
I have a page with four forms. Each form's layout is defined using the following CSS grid configuration, which is shared between all of the forms:
.base-grid-wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-row-gap: 1em;
grid-column-gap: 1em;
width: 75%;
}
自从 Chrome 80 发布以来，这些表单中的第一个的样式已经(有点)被破坏了.grid-template-columns 的计算值是不一致的，但仅适用于四种形式中的第一种.对于以下三种形式——它们使用相同的基本网格定义——网格的列大小一致，这是我在使用 repeat(12, 1fr) 时所期望的.在 Chrome 80 之前，情况并非如此:所有表单的网格都有统一大小的列.
Since Chrome 80 was released, the styling for the first of these forms has been (sort of) broken. The computed values for grid-template-columns is non-uniform, but only for the first of the four forms. For the following three forms--which use the same base grid definition--the grid's columns are uniformly sized, which is what I expect when using repeat(12, 1fr) as I have. Before Chrome 80, this was not the case: all of the form's grids had uniformly-sized columns.
在其他浏览器(Safari 和 Firefox)中，列按预期呈现.Chrome 80 中是否有什么变化会导致这种情况?搜索 Chrome 更新日志，我似乎找不到任何相关内容.
In other browsers (Safari and Firefox), the columns render as expected. Is there something that changed in Chrome 80 that would have caused this? Searching through the Chrome changelog, I can't seem to find anything relevant.
我试图查看是否有任何范围更广的 CSS 规则可能导致这种情况，但我找不到任何东西.我承认我不是最高级的 CSS 用户，所以我肯定可能错误地配置了网格或其他什么，但请查看下面链接的 Stackblitz，看看是否是这种情况.
I've tried to see if there are any wider-scoped CSS rules that might be causing this, but I can't find anything. I admit I'm not the most advanced CSS user, so I definitely could have configured the grid incorrectly, or something, but look at the Stackblitz linked below to see if this is the case.
我看到了其他几个类似的 Stackoverflow 问题，但似乎没有一个完全适合我所看到的问题:
I saw a couple of other similar Stackoverflow questions, but none of them seem to quite fit the problem I'm seeing:
Chrome 和 Firefox 中的 CSS 网格行为不同
--> 可能和我的问题最相似，但没有任何相关的解决方案，但确实有问题的确认
--> perhaps most similar to my problem, but doesn't have any relevant solutions, but it does have confirmation of the problem
是否有人在使用 Chrome 时遇到过问题80 和 CSS 网格
--> 类似于我的问题，但它没有一个很好的问题示例，因此它没有任何有用的响应
--> similar to my problem, but it doesn't have a good working example of the problem, and thus it doesn't have any useful responses
为什么 Chrome 80 会导致这个网格-template-rows:自动问题
--> 与我的情况非常不同的配置，所以与我所看到的不太相关
--> very different configuration than in my case, so not super relevant to what I'm seeing
就其价值而言，这是一个使用 Angular Material 的 Angular 8 应用程序，但我很确定这不是问题的根源，尤其是考虑到它在其他浏览器中按预期工作.
For what it's worth, this is an Angular 8 application using Angular Material, but I'm pretty certain that that's not the source of this problem, especially considering it works as intended in other browsers.
这是一个复制问题的 Stackblitz(确保在 Chrome 80+ 中打开):editable &(可检查的)托管应用.
Here's a Stackblitz that replicates the problem (be sure to open in Chrome 80+): editable & (inspectable) hosted app.
这里还有一些截图:
推荐答案
你的问题和问题你差不多链接1(我也回答过)它与chrome如何处理1fr有关，它等于minmax(auto,1fr).
You issue is almost similar to the question you linked1 (where I also answered) and it has to do with how chrome is dealing with 1fr which is equal to minmax(auto,1fr).
使用 minmax(0,1fr) 似乎解决了这个问题，但我需要深入挖掘才能找出原因.这要么是一个错误，要么他们改变了 minmax() 的计算方式.
Using minmax(0,1fr) seems to fix the issue but I need to dig more in order to identify why. It's either a bug or they changed the way minmax() is calculated.
将更新错误报告或详细说明
1:这个问题涉及行配置，我们需要做相反的事情.使用 1fr (minmax(auto,1fr)) 而不是 minmax(0,1fr)
1: That questions deals with a row configuration where we need to do the opposite. Use 1fr (minmax(auto,1fr)) instead of minmax(0,1fr)
这篇关于Chrome 80 中的网格模板列计算不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
