New issue
Advanced search Search tips

Issue 787125 link

Starred by 2 users

Issue metadata

Status: WontFix
Owner:
Closed: Nov 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug-Regression



Sign in to add a comment

CSS Grid Autofill Creating Phantom Tracks

Reported by apsch...@gmail.com, Nov 20 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce the problem:
Not sure on the specific steps but here's a codepen demo I created that showcases the issue. It has to do with setting the grid-template-columns style to repeat(auto-fit, minmax(300px, 1fr).

https://codepen.io/rantis/full/gXxxRB/

What is the expected behavior?
The expected behavior is no additional whitespace other than the expected grid-gap

What went wrong?
Something about how Chrome is provisioning the extra tracks based on the auto-fit keyword is causing additional unwanted whitespace while rendering the HTML and CSS.

Did this work before? Yes 

Does this work in other browsers? Yes

Chrome version: 62.0.3202.94  Channel: stable
OS Version: 10.0
Flash Version:
 
Labels: Needs-Triage-M62 Needs-Bisect
Components: -Blink>CSS Blink>Layout>Grid
Cc: jfernandez@chromium.org

Comment 4 by r...@igalia.com, Nov 21 2017

Cc: -jfernandez@chromium.org svil...@igalia.com jfernan...@igalia.com r...@igalia.com
Owner: r...@igalia.com
Status: WontFix (was: Unconfirmed)
I believe this is not a bug, it has the same behavior in Firefox.
If you remove "width: 90%;" it takes the whole width, dunno if I was taking a look to the wrong part of the example, if so please provide an screenshot of the issue.

Comment 5 by apsch...@gmail.com, Nov 21 2017

The demo is the codepen.io link in the original description, however, what you're seeing could be very dependent on the version of Firefox you're using. I tested in the Firefox v55 and the new v56 (Quantum).

I attached a screenshot of the same demo running side by side in Chrome and Firefox for reference. Notice how on the right, there are no gaps other than the ones defined by the grid-gap style while on the left there is essentially an extra element worth of space?
css grid chrome vs firefox.png
69.3 KB View Download

Comment 6 by apsch...@gmail.com, Nov 21 2017

Just tested in Edge and it renders the same as Firefox. Definitely a bug.

Comment 7 by r...@igalia.com, Nov 21 2017

Ok, I can see it now (I thought you were talking about the space on the right.

In any case I can only reproduce this in M62, it seems to be fixed in M63 and M64. I was comparing M64 with last Firerox that's why I didn't notice the problem before. 

Sign in to add a comment