New issue
Advanced search Search tips

Issue 795260 link

Starred by 2 users

Issue metadata

Status: Duplicate
Merged: issue 784059
Owner:
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug-Regression



Sign in to add a comment

CSS grid-template-rows broken since 63

Reported by taocumpl...@gmail.com, Dec 15 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Steps to reproduce the problem:
1. Download attached file or see this codepen https://codepen.io/anon/pen/XVbLZz/
2. 
3. 

What is the expected behavior?
The two divs containing the grids should be different.

What went wrong?
The pen (or attachment) illustrates the setup that we currently have in our app.
The grid has an upper row with variable height and a bottom row with fixed height. Already in previous versions of Firefox and Chrome the behavior was not the same.
In firefox I used

grid-template-rows: 1fr auto;

whereas in Chromium I had to use the reverse

grid-template-rows: auto 1fr;

I don't really know which of these versions is actually right, but as long as I could work around the problem I didn't care.

The codepen (or attachment) displays both cases, the upper div is like it had worked in Chrome before version 63 and the lower one is like it works in Firefox. I tested it just now in Chrome versions
62.0.3202.75
63.0.3239.84
63.0.3239.108
65.0.3295.0

From 63.* onward the upper row has a height of 0.
It seems like all relative units or auto are broken in grid-template-rows. Absolute units still work.

Did this work before? Yes 62.0.3202.75

Does this work in other browsers? Yes

Chrome version: 63.0.3239.84  Channel: stable
OS Version: 10.0
Flash Version:
 
css_grid-template-rows.html
1.4 KB View Download

Comment 1 by gov...@chromium.org, Dec 15 2017

Cc: pbomm...@chromium.org e...@chromium.org
Labels: Needs-Triage-M63

Comment 2 by woxxom@gmail.com, Dec 15 2017

Bisect info: 501247 (good) - 501261 (bad)
https://chromium.googlesource.com/chromium/src/+log/0540957d..d5eea0af?pretty=fuller
Suspecting r501249 = bb05a60c04d5754764ca5c8f35b7fa0c77fce9e3 = https://crrev.com/c/657578 by rego@igalia.com
"[css-grid] Move stretch of "auto" tracks into the track sizing algorithm"
Landed in 63.0.3214.0

Also observed in Canary 65.0.3295.0.
Components: -Blink>Layout Blink>Layout>Grid
Labels: -Needs-Triage-M63 ReleaseBlock-Stable RegressedIn-63 M-63 FoundIn-64 FoundIn-65 FoundIn-63 Target-64
Owner: r...@igalia.com
This is the regression which started in M63 and above(M64 and M65)

Bisect result :
You are probably looking for a change made after 501248 (known good), but no later than 501249 (first known bad).
CHANGELOG URL:
The script might not always return single CL as suspect as some perf builds might get missing due to failure.
  https://chromium.googlesource.com/chromium/src/+log/48c811b2b097a20a98d7515161913a9d037c4d52..bb05a60c04d5754764ca5c8f35b7fa0c77fce9e3

Comment 4 by e...@chromium.org, Dec 15 2017

Status: Assigned (was: Unconfirmed)

Comment 5 by e...@chromium.org, Dec 15 2017

Likely too big (and too disruptive) of a change to down integrate but we should determine which behavior is correct and make sure we're compatible with FF and IE.
Based on offline chat with eae@ we aren't blocking M63 at this point. 

Comment 7 by r...@igalia.com, Dec 18 2017

Cc: svil...@igalia.com jfernan...@igalia.com
Mergedinto: 784059
Status: Duplicate (was: Assigned)
The problem is that the grid container is a flex item and that's causing some issues.
It seems that the available height of the grid container is wrongly computed in that case.
That was already reported as  bug #784059 .

As a workaround fro the example using "flex: 1" instead of "flex-grow: 1"
and "grid-template-rows: 1fr auto;" will make the trick.

Sign in to add a comment