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:
->也许与我的问题最相似，但是没有任何相关的解决方案，但确实可以确认问题
--> perhaps most similar to my problem, but doesn't have any relevant solutions, but it does have confirmation of the problem
使用Chrome浏览器时是否有人遇到问题80和CSS Grid
->与我的问题类似，但是它没有很好的问题示例，因此没有任何有用的答案
--> 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+中打开):可编辑& (可检查的)托管应用.
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屋！
