New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 645746 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Sep 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Blocking:
issue 589460



Sign in to add a comment

[css-grid] When using the repeat notation and auto-fit, grid-gaps are not collapsing to 0

Reported by rachelan...@gmail.com, Sep 10 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2856.0 Safari/537.36

Example URL:
http://codepen.io/rachelandrew/details/dpYzkq/

Steps to reproduce the problem:
Create a grid definition:

.cont {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

Auto place three child items and ensure the container is wide enough to cause collapsing of tracks. 

What is the expected behavior?
Gaps should collapse to 0 in the same manner as tracks.

What went wrong?
Get what appears to be a gap sized space at the end of the row.

Does it occur on multiple sites: No

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 55.0.2856.0  Channel: canary
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 23.0 r0

This seems to work correctly in Firefox Nightlies.
 
Cc: rnimmagadda@chromium.org
Components: Blink>Layout>Grid
Labels: -Type-Compat M-53 OS-Linux OS-Windows Type-Bug
Status: Untriaged (was: Unconfirmed)
Able to repro this issue on Windows 7, MAC (10.11.6) & Ubuntu Trusty (14.04) for Google Chrome Stable Version - 53.0.2785.101

This is a Non-Regression issue existing from M32 - # 32.0.1652.0 
645746.mp4
1.1 MB View Download

Comment 2 by r...@igalia.com, Sep 12 2016

Blocking: 589460
Cc: svil...@igalia.com jfernan...@igalia.com r...@igalia.com
Labels: -OS-Linux -OS-Windows -OS-Mac OS-All
Owner: svil...@igalia.com
Status: Assigned (was: Untriaged)
Thanks for the report Rachel, it seems we've an extra gap there.
Probably @svillar can investigate it.

@rnimmagadda you need to enable the experimental flag to test Grid Layout (--enable-experimental-web-platform-features).
auto-fit-gaps-current.png
5.7 KB View Download
auto-fit-gaps-expected.png
5.6 KB View Download

Comment 3 by r...@igalia.com, Sep 12 2016

Summary: [css-grid] When using the repeat notation and auto-fit, grid-gaps are not collapsing to 0 (was: When using the repeat notation and auto-fit, grid-gaps are not collapsing to 0)

Comment 4 by svil...@igalia.com, Sep 12 2016

Checking
Project Member

Comment 5 by bugdroid1@chromium.org, Sep 13 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/011d6fa1bdaa3f942a389ae3b55d20f681c63bbf

commit 011d6fa1bdaa3f942a389ae3b55d20f681c63bbf
Author: svillar <svillar@igalia.com>
Date: Tue Sep 13 09:53:19 2016

[css-grid] Too many gaps with trailing collapsing tracks

The total size of gaps were incorrectly computed whenever there were
trailing collapsed tracks (with collapsed gaps). The problem was that we
were trying to optimize too much the amount of hash table queries required
to know the gaps between two lines. We were considering that a gap always
exist between 2 consecutive tracks if the first one is not empty. That's
generally true (for both NOTEMPTY - NOTEMPTY and NOTEMPTY - EMPTY+
- NOTEMPTY sequences) but not for all the cases (NOTEMPTY - EMPTY+).

BUG= 645746 

Review-Url: https://codereview.chromium.org/2336663002
Cr-Commit-Position: refs/heads/master@{#418209}

[modify] https://crrev.com/011d6fa1bdaa3f942a389ae3b55d20f681c63bbf/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-fit-columns.html
[modify] https://crrev.com/011d6fa1bdaa3f942a389ae3b55d20f681c63bbf/third_party/WebKit/Source/core/layout/LayoutGrid.cpp

Comment 6 by svil...@igalia.com, Sep 13 2016

Status: Fixed (was: Assigned)
Fixed!

Sign in to add a comment