New issue
Advanced search Search tips

Issue 896715 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Closed: Oct 22
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

[grid] Margin unexpectedly inclusive of CSS grid row/column with upcoming changes

Reported by philleew...@gmail.com, Oct 18

Issue description

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

Steps to reproduce the problem:
Visit https://codepen.io/phil-lee/pen/MPVzRJ on Chrome Canary and the margin renders inclusive of the element contained in CSS Grid row. 

What is the expected behavior?
I would expect the margin to be exclusive of the element.

What went wrong?
I believe the recent changes to CSS Grid have affected how an element's margins are treated when nested inside of a CSS Grid that has rows/columns defined using percentages. 

Did this work before? Yes 69

Does this work in other browsers? No
 - Visit https://codepen.io/phil-lee/pen/MPVzRJ on Opera Developer see issue
- Visit https://codepen.io/phil-lee/pen/MPVzRJ on Firefox Nightly no issue
- Visit https://codepen.io/phil-lee/pen/MPVzRJ on Safari no issue
- Visit https://codepen.io/phil-lee/pen/MPVzRJ on Chrome 69 no issue

Chrome version: 69.0.3497.100  Channel: n/a
OS Version: OS X 10.13.6
Flash Version:
 
Margin with new CSS grid changes.htm
140 KB View Download
Margin + CSS Grid render in Canary.png
93.7 KB View Download
Cc: r...@igalia.com
Components: -Blink>CSS Blink>Layout>Grid
Status: Available (was: Unconfirmed)
Summary: [grid] Margin unexpectedly inclusive of CSS grid row/column with upcoming changes (was: Margin unexpectedly inclusive of CSS grid row/column with upcoming changes)
Owner: r...@igalia.com
Status: WontFix (was: Available)
This is not a bug, this is the expected behavior after this change:
https://www.chromestatus.com/feature/6708326821789696

Now the 33.3% row is resolved to a fixed size and the item gets stretched/shrinked to that size.
If you use "repeat(3, auto)" you'd get the same output than other browsers
that haven't implemented the new resoultion for percentage row tracks yet.
BTW, the output should be the same in Safari Technology Preview.
 
Ahhh I thought it might be part of the upcoming changes. Thanks for the example in your explanation!

Sign in to add a comment