Re: [csswg-drafts] [css-flexbox] Intrinsic main size algorithm for row flexboxes not web compatible (#8884)

Status update:

There's an experimental conservative algorithm for calculating intrinsic sizes of row containers shipping in Chrome Canary. It's been enabled at 100% installs for three weeks with virtually no issues.[^1] The goal is to establish a web-compat floor.

We don't examine flex fractions at all for intrinsic size computations. Instead, an item's final contribution is either (1) hypothetical main size IF not derived from the item's contents[^2] AND the item has a 0 flex factor in whichever direction it wants to go; otherwise: (2) its intrinsic contribution from [css-sizing-3](https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution) (notably NOT the contribution specified in [css-flexbox](https://drafts.csswg.org/css-flexbox/#intrinsic-item-contributions))

This algorithm is an attempt to cause the least possible compat problems. It is the smallest, most conservative change we can make. The downside is that it fixes only the most glaring examples of the old algorithm's shortcomings. If this conservative algorithm ends up having nontrivial compat issues, we are permanently stuck with the existing algorithm. The flip side is that IF this conservative algorithm IS web compatible, we could then try to derive a less conservative algorithm that addresses more of the old algorithm's shortcomings.

We've collected 6 _author-submitted_ examples of the old algorithm's shortcomings at http://wpt.live/css/css-flexbox/intrinsic-size/row-use-cases-001.html. Regressions from our previous attempts to change this algorithm are at http://wpt.live/css/css-flexbox/intrinsic-size/row-compat-001.html. The _specified_ algorithm fixes all the use cases but fails all the compat tests. This _conservative_ algorithm passes all the compat tests but fixes only half of the use cases.

```javascript
let ComputeIntrinsicSizesOfSingleLineRowContainer = (flex_container) => {
  let container_min_size, container_max_size = container_border_and_padding;

  for (item in flex_container.items) {
    let {min_contribution, max_contribution} = ComputeIntrinsicContributionsPerCSSSizing3(item);
    
    const cant_move = (item.shrink_factor == 0 && item.flex_base_size > min_contribution) ||
                      (item.grow_factor == 0 && item.flex_base_size);
    if (cant_move && item.basis != "content")
      min_contribution = item.hypothetical_main_size;

    // Analog for max, which is identical to above except s/min/max/g.
    const cant_move = (item.shrink_factor == 0 && item.flex_base_size > max_contribution) ||
                      (item.grow_factor == 0 && item.flex_base_size < max_contribution);
    if (cant_move && item.basis != "content")
      max_contribution = item.hypothetical_main_size;

    container_min_size += min_contribution;
    container_max_size += max_contribution;
  }

  return { container_min_size, container_max_size };
}
```

[^1]: Caveat: we get many more compat reports when our changes graduate release channels, and this change has to survive 3 more graduations.

[^2]: In other words: if (the specified value of `flex-basis` is definite) OR (the specified value of `flex-basis` is `auto` AND the specified main size is definite).

-- 
GitHub Notification of comment by davidsgrogan
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8884#issuecomment-1636311498 using your GitHub account


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

Received on Friday, 14 July 2023 19:23:44 UTC