[csswg-drafts] [css-flexbox] overflow clip on SVG elements and flex layout (#7714)

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

== [css-flexbox] overflow clip on SVG elements and flex layout ==
This issue is related to the change in #7144 which included a change to add `overflow: clip` to svg elements in UA stylesheet. This causes a compat issue with the following test case:

```html
<style>
  div {
    display: flex;
    width: 100px;
    height: 100px;
  }
  svg {
    flex-grow: 1;
  }
</style>
<div>
  <svg width="150" height="150">
    <rect width="150" height="150" fill="green"></rect>
  </svg>
</div>
```

SVG has a min-width/min-height value of auto via default value for these properties. Before the resolution in #7144, SVG also had `overflow: hidden` applied to it via UA stylesheet.

During flex layout, the minimum width computed for this SVG element with these inputs was 0. Theoretically this aligns with the [spec](https://drafts.csswg.org/css-flexbox/#min-size-auto) based on the text here: "the used value of a [main axis](https://drafts.csswg.org/css-flexbox/#main-axis) [automatic minimum size](https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size) on a flex item that is not a [scroll container](https://drafts.csswg.org/css-overflow-3/#scroll-container) is its [content-based minimum size](https://drafts.csswg.org/css-flexbox/#content-based-minimum-size)".  overflow: hidden causes the element to be a scroll container. But it's specifically not the case for SVG and neither of Chrome/Firefox/Safari make the element scrollable. The relevant spec text is [here](https://svgwg.org/svg2-draft/render.html#OverflowAndClipProperties).

With the change in #7144, the SVG element now gets a value of 'clip' for 'overflow'. This value lines up with how 'hidden' is used on these elements in each browser above. But a side-effect of this is that min-width/min-height:auto now uses the content-based-minimum-size on this element which is incompatible with existing behaviour. The options to fix this are:

1. Add min-width/min-height: 0 to SVG to retain the old behaviour. But this would be breaking if a developer stylesheet changed the value of 'overflow' to 'visible' which earlier would've used min-width/min-height auto.
2. Carve a special-case for svg where 'clip' behaves same as other non-visible values when computing min-width/min-height to retain the current behaviour.

Leaning towards 2) since 'overflow: visible' is likely to be a common use by developers for SVG. SVG has respected overflow:visible to not clip content before #7144.

@bfgeek FYI.


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


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

Received on Thursday, 8 September 2022 18:24:25 UTC