lit-virtualizer in mwc-dialog / Items overlap

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:

PolymerLabs / uni-virtualizer

lit-virtualizer in mwc-dialog / Items overlap #81