search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

Possible bug relating to height of auto track when percentage height is used inside grid-item in Firefox. #44

Closed rctneil closed 7 years ago

rctneil commented 7 years ago

Hello Rachel,

Here is a test case for a possible Grid bug. This CodePen case displays differently in Firefox to Chrome. What I see in Chrome is what I would expect.

https://codepen.io/rctneil/pen/vxgGar

Thanks, Neil

rachelandrew commented 7 years ago

If you can create a reduced test case for me I'll have a look. As you have a bunch of stuff going on there - not all grid. Remove the Sass, remove anything that doesn't trigger the issue. You are going to need to do that to submit a bug to a browser anyway.

I'm sorry I don't have unlimited time to pick apart examples for people, but I also have to earn a living. With grid shipping I expect a lot of questions, so am taking a hard line on test cases. Lea Verou wrote a great article explaining how to do this - https://www.smashingmagazine.com/2011/09/help-the-community-report-browser-bugs/

rctneil commented 7 years ago

Rachel,

I'm so sorry. I did tidy it up after you replied on Twitter but I have removed all the sass nesting now to leave pure HTML and CSS. The bug seems to be based on the percentage height on the pseudo element.

I don;t really want to take anything more away from the CodePen as it'll lose the problem itself.

I fully understand you have to earn a living and can't be answering questions all the time but as you've been a big supporter of both Grid and FlexBox and have provided many many useful examples and talks I thought i'd contact you first.

Apologies again. I hope the pared down CodePen is better.

Neil

rachelandrew commented 7 years ago

It's certainly different between the two, and is the same in current nightly. You could log it with Firefox, however I think I'd be tempted to see if I could make it happen in a simpler way first to isolate exactly what triggers it.

By that I mean removing anything that doesn't change the bug - it might leave it not looking stylistically identical, but it just saves someone else the work of going through and seeing which properties can be removed.

rctneil commented 7 years ago

The Firefox render is apparently as per spec and it's Chrome that's rendering incorrectly. According to the spec, a percentage padding in the vertical axis will take its dimension from the main grid axis. In my case it was taking it from the vertical axis (which was auto) and converting it to 0.

This rule is only applied if the element is a grid item or a flex item. If the element is displayed block etc then percentage paddings are based on the width.

I do think that I prefer Chrome's method but if it's not to spec then there's not a lot I can do. It basically breaks the "intrinsic aspect ratio" technique that's based on this.