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

Issue 776581 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Nov 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Centered auto margin not recalculated when overflow changes on display: grid item

Reported by andrew.a...@gmail.com, Oct 19 2017

Issue description

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

Steps to reproduce the problem:
With an element that is `display: grid` and has a scrollbar, and an element that is `margin: auto` for left & right

1. On grid element, change overflow to `hidden`
2. Wait at least 1 frame draw
3. Change grid element overflow back to `auto`

What is the expected behavior?
Margin auto recalculates and there is no horizontal overflow if none existed before

What went wrong?
The element with margin auto retains it's previous size and causes a horizontal scrollbar to appear, even if one did not exist before

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 61.0.3163.100  Channel: n/a
OS Version: 10.0
Flash Version:
 
margin-auto-grid-example.html
962 bytes View Download
Cc: krajshree@chromium.org
Labels: Needs-Milestone Needs-Feedback
Unable to reproduce the issue on Win-10 using chrome reported version #61.0.3163.100, latest stable #62.0.3202.62 and latest canary #64.0.3247.0.

Attached a screen cast for reference.

Following are the steps followed to reproduce the issue.
------------
1. Opened the attached file "margin-auto-grid-example.html"
2. Observed a horizontal scrollbar at the bottom of the page.
3. Changed the grid element overflow back to `auto`.
4. Did not observe any horizontal scrollbar at the bottom of the page.

Reporter@ - Could you please verify the screen cast and please let us know if anything missed from our side and also please check the issue on latest canary #64.0.3247.0 by creating a new profile without any apps and extensions and please let us know if the issue still persist or not.

Thanks...!!
776581.webm
6.5 MB View Download
So if you are seeing the horizontal scrollbar at all, you are seeing the bug.

I've tweaked the file to show it a bit clearer. If you load this file, it should start with no horizontal scrollbar, only a vertical one. Clicking hide scrollbars adds `overflow: hidden` to the body, and clicking the show button removes that style. After clicking the show button, there is now a horizontal scrollbar when there shouldn't be.

The `margin: auto` on the div element resizes to larger when the scrollbars go away. However, when the scrollbars come back, the margin is not recalculated so it's width is too wide and it creates a horizontal scroll as it overflows the page.
margin-auto-grid-example.html
1.1 KB View Download
Project Member

Comment 3 by sheriffbot@chromium.org, Oct 23 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 4 by hdodda@chromium.org, Oct 25 2017

Cc: hdodda@chromium.org
Labels: M-64 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on windows 10 , Mac os 10.12.6 and ubuntu 14.04 using chrome M62 #62.0.3202.62 and M64 #64.0.3249.0 .

This is a Non-Regression issue seen from M57 and the behavior is different earlier to M57 .


Marking it as untraiged for further inputs on this.

Thanks!

Comment 5 by e...@chromium.org, Oct 30 2017

Components: -Blink>Layout Blink>Layout>Grid
Owner: r...@igalia.com
Status: Assigned (was: Untriaged)
Cc: jfernan...@igalia.com
I've been able to reproduce the issue on linux chrome 63.0.3239.9
Owner: jfernan...@igalia.com
Fix is coming: https://crrev.com/c/751262
Project Member

Comment 9 by bugdroid1@chromium.org, Nov 4 2017

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

commit d84d88fc4d3223c89148ef62bc2785410e77fa2e
Author: Javier Fernandez <jfernandez@igalia.com>
Date: Sat Nov 04 10:06:43 2017

[css-grid] Ignore auto-margins in the track sizing algorithm

We resolve any auto-margin during the execution of the Grid logic.
Even though we compute them again if there is any change requiring to
perform a new layout, the previously resolved auto-margins may affect
the track sizing computation for content-sized (eg. auto) tracks.

We must ignore any 'auto' margin during the track sizing algorithm,
so I added additional logic to the utility functions we already have
in order to ignore any previously computed 'auto' margin.

Bug:  776581 
Change-Id: I3a18819feed44d856c3a80d15e387721872b5f98
Reviewed-on: https://chromium-review.googlesource.com/751262
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#514042}
[add] https://crrev.com/d84d88fc4d3223c89148ef62bc2785410e77fa2e/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin-expected.html
[add] https://crrev.com/d84d88fc4d3223c89148ef62bc2785410e77fa2e/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-scroll-accounts-for-auto-margin.html
[modify] https://crrev.com/d84d88fc4d3223c89148ef62bc2785410e77fa2e/third_party/WebKit/Source/core/layout/GridLayoutUtils.cpp
[modify] https://crrev.com/d84d88fc4d3223c89148ef62bc2785410e77fa2e/third_party/WebKit/Source/core/layout/GridTrackSizingAlgorithm.cpp

Status: Fixed (was: Assigned)
This issue should be FIXED now, please, verify.

Sign in to add a comment