Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/w3c/csswg-drafts/issues/7714 below:

[css-flexbox] overflow clip on SVG elements and flex layout · Issue #7714 · w3c/csswg-drafts · GitHub

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:

<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 based on the text here: "the used value of a main axis automatic minimum size on a flex item that is not a scroll container is its 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.

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3