width: container doesn't work when display: none

[lehmannro]

Bug Description

Setting the initial display mode to none in a container element for Vega-Embed leads to no visible rendering when the Vega-Lite spec sets width: "container":

<div id="chart" style="width: 500px; display: none;">
  Placeholder
</div>
<script type="module">
  import vegaEmbed from 'https://cdn.jsdelivr.net/npm/vega-embed@7/+esm'

  await vegaEmbed(
    '#chart',
    {
      width: 'container',
      data: {
        values: [
          {"category": "A", "amount": 28},
          {"category": "B", "amount": 55},
        ],
      },
      mark: "bar",
      encoding: {
        x: {field: "category", type: "nominal"},
        y: {field: "amount", type: "quantitative"},
      },
    },
  );
  setTimeout(function() {
    document.querySelector("#chart").style.display = "block"
  }, 500);

The final <svg> element has a width="0" (and viewBox="0 0 0 344"). I guess that's correct in the sense that a display: none element has no width. Using getComputedStyle should lead to a somewhat better result in those cases, though?

Codepen: https://codepen.io/editor/lehmannro/pen/01a03034-ca12-7f36-a3ef-1982bb5c0bb9

Checklist

• I checked for duplicate issues.
  • Nothing matching getComputedStyle or display none

[domoritz]

Oh hello @lehmannro. Haven't seen you since our HPI times.