lit-virtualizer in mwc-dialog / Items overlap

[TomRauchenwald38]

When lit-virtualizer is used in a mwc-dialog, the positioning of the rendered items is off sometimes.
I'm using version 0.4.2 and chrome 87.

Test code:

export class TestView extends LitElement {
  render() {
    return html`
    <mwc-dialog id="dialog">
       ${this.renderVirtualizer()}
    </mwc-dialog>    
    <mwc-button @click=${() => this.shadowRoot.getElementById('dialog').show()}>Click</mwc-button>
    ${this.renderVirtualizer()}
    `
  }
  
  renderVirtualizer() {
    return html`<lit-virtualizer style="height: 600px; width: 400px"
       .items=${[1, 2, 3, 4, 5, 6, 7, 8]} 
       .renderItem=${(item) => this.renderItem(item)}
       ></lit-virtualizer>`;
  }
  
  renderItem(item) {
    return html`<div style="height: 200px; border: 1px solid black; width: 300px"><h1>${item}</h1></div>`;
  }
}

I've prepared a demo here: https://codepen.io/TomRauchenwald/pen/NWRxErO

I would expect the lit-virtualizer element that's rendered directly in the component to look the same as the one in the opened dialog.
Instead, the elements overlap in the dialog:

[matyaslapincs]

I managed to reproduce the issue with version 0.7.0-pre.2. using mdc-menu.
It only appears on the first render. Once the item gets rerendered (after getting scrolled out and then back in the frame) the positioning is correct again.