[csswg-drafts] [css-grid] Resolution of percentage row tracks and gutters with indefinite height (#5566)

mrego has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Resolution of percentage row tracks and gutters with indefinite height ==

I'd like to propose we change how percentage row tracks and gutters are resolved when the grid container has an indefinite height.

Right now, according to the spec, they should be resolved against the intrinsic height of the grid container. We decided to do this in order to keep symmetry in both axis of a grid, however this has some problems:
* Causes that tracks overflow the grid container in many situations.
* Requires a 2nd pass of the grid track sizing algorithm in more situations, which is worse for performance.
* Makes implementations more complex.
* Differs from the behavior of flex gutters, which might cause misunderstandings to web authors.
* Doesn't have interoperability between Chromium/Webkit vs Firefox for grid tracks.

My **proposal would be to resolve them as `auto` for tracks (like it happens on regular blocks) and to `0` for gutters**. Coming back to the previous behavior we had a few years ago.

## Examples

I'll show 2 examples and how they'd look like now vs with the proposed behavior.

### Grid tracks

For grid tracks the behavior on the spec is implemented in Chromium and WebKit but Firefox is implementing the proposed behavior.

```html
<div style="display: inline-grid; border: solid thick;
            grid-template-columns: 200px; grid-template-rows: 50%;">
  <div style="background: magenta;">foo</div>
</div>
```
![Output of the previous example, comparing current behavior when the height of the track would be 50% of its intrinsic size causing overflow of the contents, with the proposed behavior when the track would be treated as auto and there would be no overflow](https://user-images.githubusercontent.com/11602/94789899-d1572a00-03d5-11eb-8153-7420484ebfac.png)

### Grid gutters

For grid gutters the behavior on the spec is implemented in Chromium, Firefox and WebKit. Nobody is implementing the proposed behavior right now.

```html
<div style="display: inline-grid; grid-gap: 10%; border: solid thick;
            grid-template-columns: 200px; grid-template-rows: 100px 100px;">
  <div style="background: magenta;">foo</div>
  <div style="background: cyan;">bar</div>
</div>
```

![Output of the previous example, comparing the current behavior where the gap has a 20px height and the tracks overflow the grid container, with the proposed behavior when the gap is 0px and there is no overflow](https://user-images.githubusercontent.com/11602/94790006-f9468d80-03d5-11eb-8990-315d6fda7e1b.png)

## History

For historical background, it's worth noting that this topic has been discussed previously a few times already, first a few years ago in #509 and #1921, and again recently in #5081.

I'll try to summarize a little bit the history behind this topic and what has happened:
* [Firefox implemented the new behavior (resolve percentages against intrinsic height) for grid row gutters only (not for grid row tracks)](https://hg.mozilla.org/mozilla-central/rev/be1b4c042170).
* [Firefox added support for flex gutters implementing this for flex row gutters too](https://hg.mozilla.org/mozilla-central/rev/347512fd214e).
* [Chromium and WebKit implemented it for grid row gutters and grid row tracks](https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/).
* [Chromium implemented flex gutters but using the other behavior (resolve percentages to zero)](https://chromium-review.googlesource.com/c/chromium/src/+/2162149).
* [Firefox changed their flex gutters implementation to the other behavior](https://hg.mozilla.org/mozilla-central/rev/5ed4c347cc66) after the resolution in #5081.
* [WebKit is implementing flex gutters using the other behavior too](https://bugs.webkit.org/show_bug.cgi?id=206767).

In #5081 I brought up the topic to change grid layout too to make it consistent and a few people showed interest on that proposal, that's why I'm creating this issue now.

## Backwards compatibility

About web compatibility, despite of that lack of interop in this area I could only find 2 bugs on Chromium bugtracker about these topics:
* https://bugs.chromium.org/p/chromium/issues/detail?id=901447
* https://bugs.chromium.org/p/chromium/issues/detail?id=1020880

Also the bug for Firefox grid row tracks has 0 votes and no comments from authors asking about it: https://bugzilla.mozilla.org/show_bug.cgi?id=1481876

We have 2 use counters in Chromium to check about this, we've been analyzing the pages affected and these is the information we got:
* For [**grid tracks** the use counter](https://chromestatus.com/metrics/feature/timeline/popularity/3289) is **0.03%**:
  * 1/200 of the pages breaks (the breakage is some text overlapping other text).
  * 6/200 of the pages have some small changes (but without causing any breakage).
  * And surprisingly 3/200 of the pages get "fixed" if we do the change, as some elements of a carousel widget were hidden in Chromium/WebKit and only visible in Firefox.
  * The rest don't change.
* For [**grid gutters** the use counter](https://chromestatus.com/metrics/feature/timeline/popularity/3289) is **0.003%**:
  * 1/40 of the pages break in that case (again some overlapping).
  * 9/40 of the pages have some small change (without causing any big issue).
  * The rest don't change. Many of them are related to a widget from [Wordpress Genesis Theme](https://my.studiopress.com/themes/genesis/) that uses `grid-gap: 1%` but the widget usually has only 2 rows and the 2nd one is empty, so the difference is imperceptible.

You can check all the cases in the following spreadsheet including screenshots when things change: https://docs.google.com/spreadsheets/d/1khsAsLpF_Y9wZ8BmKQKBN7gUJQQAjI1PzFcWhjFuUP4/edit?usp=sharing

CC/ @atanassov, @MatsPalmgren


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5566 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 1 October 2020 09:12:29 UTC